Example Four - The next step

by Joe Gillespie — Apr 1, 2002

Follows on from Three by additionally specifying how the <h1>, <h3>, <ol>, <td>, and <tr> should behave. Now, I have reverted to the more usual 'all in one line' layout for compactness.

h1 {color: white; font-weight: bold; font-size: 24px}

h3 {color:#f6f; font-weight:normal; font-size: 18px}

ol {color:#6f3}

tr, td {color:#ff6; font-size: 12px; line-height:24px; font-family: Verdana, Geneva, Arial, Helvetica}

a:link {color:white; text-decoration:none; background-color:transparent}

a:visited {color:#ccf; text-decoration: none; background-color: transparent}

a:hover {color:#6f3; text-decoration: none; background-color: transparent}

Here, I have over-ridden the default settings for <h1> and <h3> by specifying different colors and weights.

ol, is the 'ordered list' and can have its own specifications.

tr and td affect the table tags. This is one you really have to watch because some browsers don't inherit the body settings inside tables. There is very little consistency in this particular respect between browsers at the minute. The solution is this; define what you want to happen inside a table deliberately, don't assume that the body style will be inherited, as you would expect.

a:link, a:visited and a:hover set the colors for links interaction. text-decoration: none gets rid of the underline on links but should only be used in situations where there will be no confusion as to what is a link and what isn't.

That covers the basics of Style Sheets. Play around with the values, try different combinations and see what happens. Next month, I will go into some of the finer details and warn about more of those 'gotchas'.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float