Playing with CSS

XHTML

see xhtml

Samples

brutal.css

h1 {
        font-family: Courier;
        font-style: italic;
        font-size: 300%;
}

code,pre {
        //margin: 0 0 0 25px;
        //padding: 0 0 0 5px;
        background-color: whitesmoke;
        //font-family: 'Courier New', monospace;
}

img {border:0}

pbraun minimal

body {padding:10pt}
p {margin-top:0pt;margin-bottom:0pt}
.cls3 {}
.cls2 {font-size:10pt;font-family:'Arial', sans-serif;}
.cls0 {font-weight:bold;font-size:10pt;font-family:'Arial', sans-serif;}
.cls1 {text-align:center;}
pre {border:0; margin:0; padding:0; margin-left: 20pt; padding-left:3pt; border-left: 3px solid lightgray}

pbraun legacy

body {border:0; margin:0; padding:0}
div#container {padding-left:90pt;width:612pt}
div,td {font-size:11pt; font-family:'Arial', sans-serif}
table {border-collapse:collapse; border-spacing:0}
td {white-space:nowrap}
a {text-decoration:none}
a:hover {text-decoration:underline}
pre {border:0; margin:0 0 0 25px;
        padding:0 0 0 5px;
        border-left:3px solid gray;
        font-family:'courier new', monospace;
        font-size:10pt}
div.pre {border:0; margin:0 0 0 25px;
        padding:0 0 0 5px;
        border-left:3px solid gray;
        font-family:'courier new', monospace;
        font-size:10pt}
img {border:0}
.filelist {border-right:1px dotted gray; padding-right:5px}
.titlelist {padding-left:5px}

pbraun fancy addon

table.bar {
        border-collapse:collapse;
        border-spacing:0;
        width: 100%;
        background-color: dimgray;
        // border-right: 1px solid #a3a3a3;
}

td.bar {
        border: 0;
        text-align: center;
        white-space: nowrap;
        padding: 4pt;
        font-family: cursive;
        font-variant: small-caps;
        font-size: 10pt;
        font-color: white;
        font-weight: bold;
        color: #a3a3a3;
}

td.selected {
        border: 0;
        text-align: center;
        white-space: nowrap;
        padding: 4pt;
        font-family: cursive;
        font-variant: small-caps;
        font-size: 10pt;
        font-color: white;
        font-weight: bold;
        color: #a3a3a3;
        background-color: lightgray;
}

td.max {
        border: 0;
        width: 100%;
}

a.bar {
        color: white;
        text-decoration: none
}

alternatives

See Index of /css/

CSS for Markdown

Some nice stylesheets for markdown generated HTML:

• https://github.com/markdowncss
• http://markdowncss.github.io/modest/
• http://markedstyle.com/styles?sort=date

Don’t forget to add e.g. <link rel="stylesheet" href="css/modest.css" /> into your html headers.

Resources

CSS VALIDATE http://jigsaw.w3.org/css-validator/check/referer

Red color code https://www.rapidtables.com/web/color/red-color.html

Orange Color Code http://www.rapidtables.com/web/color/orange-color.htm

Better colors https://material.io/design/color/the-color-system.html#tools-for-picking-colors