Playing with CSS

XHTMLXHTML

see xhtml

SamplesSamples

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 MarkdownCSS 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.

ResourcesResources

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