An example style sheet

/* Created by Ann Gilliver} */

/* links */

a:link {color: blue;
font-weight: normal;
text-decoration: underline;}

a:visited {color: maroon;
font-weight: normal;
text-decoration: underline;}

a:hover {color: red;}

Defines the anchor tags.

a:link is a normal link i.e you haven't clicked it yeat.

a:visited is after you’ve clicked it.

a:hover is when you hover the mouse over the link.

Each link is a different colour (these are the defaults) and the link is underlined.

/* Body text */

body {background: white;
font-family: Arial, Verdana, sans-serif;
font-size: 10pt;
line-height : 12pt;}

Defines the body text.

The background colour is white. The font is Arial but if the PC doesn’t have Arial, the browser looks for Verdana and finally for a generic sans serif font.

/* headings */

h1 {color: "#00008B";
font-family: Arial, Verdana, sans-serif;
font-size: 12pt;
font-weight: bold;
border-bottom: medium solid #d5f1e8;
padding-top: 0.25in;
padding-bottom: 0.05in;}

h2 {color: "#00008b";
font-family: Arial, Verdana, sans-serif;
font-size: 12pt;
font-weight: bold;}

h3 {color: "#00008b";
font-family: Arial, Verdana,sans-serif;
font-size: 10pt;
font-weight: bold;}

Defines the headings. You can set font, colour, weight, style and so on.

I’ve only got three levels but you can go up to six (I’ve never need to though).

/* Lists */

ul {font-family: Arial, Verdana, sans-serif;
font-weight: normal;
margin-left: 20px;}

ol {font-family: Arial, Verdana, sans-serif;
font-weight: normal;
margin-left: 30px;}

li {font-family: Arial, Verdana, sans-serif;
font-weight: normal;
padding-bottom: 6pt;}

Defines the bulleted and numbered lists. I don't do anything fancy with the bullets. I just use the defaults

/* Paragraphs and preformatted paragraphs*/

p {font-family: Arial, Verdana, sans-serif;
font-size: 10pt;}

.indent {font-family: Arial, Verdana, sans-serif;
font-weight: normal;
font-size: 10pt;
margin-left: 30px;}

pre {font-family : "Courier New", monospace;
font-weight : bold;
font-size: 9pt;
margin-left: 30px;}

Sets up a paragraph, an indented paragraph and a preformatted paragraph for code or stuff the user types in.

/* Table tag attributes */

table {font-family: Arial, Verdana, sans-serif;
font-size: 10pt;
vertical-align : top;
padding-left: 1pt;
border-bottom : solid;
border-bottom-color: "#00008B";
border-bottom-width : thin;}

th {font-family:Arial, Verdana, sans-serif;
font-weight: bold;
text-align : left;
padding-top: 3pt;
padding-bottom: 3pt;
padding-left: 1pt;
border-top : solid;
border-top-color: "#00008B";
border-top-width : thin;
border-bottom : solid;
border-bottom-color: "#00008B";
border-bottom-width : thin;
background-color : "d5f1e8";}

td {font-family: Arial, Verdana, sans-serif;
font-size: 10pt;
vertical-align : top;
padding-left: 1pt;
padding-top: 6pt;
border-bottom : none;}

Define how the tables look.

The table has a bottom border.

The table header has a top and bottom border and a background colour. The text is also bold.

/* Contractions and expansions */

.parent {color :blue;
font-family: Arial, Verdana, sans-serif;
font-size: 10pt;
font-weight: bold;
cursor: hand;}
.child {display: none;
font-family: Arial, Verdana, sans-serif;
font-size: 10pt;}

These are for contracting and expanding headings. You might not need these. They need a bit of javascript as well.