This web site is about Cascading Style Sheets as a means to separate the presentation from the structural markup of a web site, and it will help you answer some of those frequently asked Questions, explains some of the Basics of CSS, gives you tips and tricks for tackling the problems with Netscape 4, offers you a tutorial about Positioning with CSS (CSS-P, web design without tables). There is also a page with interesting Links.
This page uses CSS to present the content in the best possible manner. If you can see this message, then CSS (or JavaScript) is not enabled in your browser, and the page will not appear as the designer intended.

Step 3: Fonts and Links

We have the outlines of the page, but to make it work we have to declare different styles for the links, because the Navigation area has a different background than the main content. And while on this topic, we can also declare the other fonts and font-sizes on the page:

P, OL, UL, DL {font-size: 13px;}
/*font-family is already defined, here I only set the font-size*/
P OL, P UL, P DL, OL UL {font-size: 13px;}
/*and here the I prevent the incredible shrinking text*/
        
.six {font-size: 11px; 
  color: #999999; /*this is for small text*/
  background: transparent;}
.mit {text-align: justify;}/*justified text*/
.red {color : #FF0000; background: #FFFFFF;}
.mint {color: #009999; background: #FFFFFF;}
.ROT {font-size: 16px; /*also red, but bigger and in bold*/
  color: #FF0000; 
  font-weight: 600; 
  background: #FFFFFF;}
    
a:link {/*normal links in the text*/
  color: blue; 
  text-decoration : none; 
  background: #FFFFFF;}
a:visited {
  color: #FF0000; 
  text-decoration : none; 
  background: #FFFFFF;}
a:hover { 
  color: #999999; 
  text-decoration : underline; 
  background: #FFFFFF;}

/*now follow the section links in the navigation bar on the left side*/        
a.nav:link {
  color: #FFFFFF; 
  text-decoration : none; 
  font-weight: 600; 
  font-size:14px; 
  background: transparent;}
a.nav:visited {
  color: #FF8C00; 
  text-decoration : none;
  font-weight: 600; 
  font-size:14px; 
  background: transparent;}
a.nav:hover { 
  color: #7FFFD4; 
  text-decoration : none; 
  font-weight: 600; 
  font-size:14px; 
  background: transparent;}
a.navtot {/*the style for the actual page*/
  color: #CDCDCD; 
  text-decoration: none; 
  font-weight: 600; 
  font-size: 14px; 
  background: transparent;}

Back to the Top

This should take care of most styles for a web site.

Of course there are a few NN 4.xx issues: If you declare {font-weight: normal;} on an element, descendant <b> and <strong> elements will not be bold, unless you explictly set {font-weight: bold;} or {font-weight: 800;} on them. This means, BODY {font-weight: normal} will suppress <b> and <strong>'s boldness; and this is the reason why I set B, STRONG {font-weight: 800} to restore it:

strong, b {font-weight: 800;}
/*NN 4.xx needs that...*/ 
big {font-size: larger;}
/*to emphasize words, use it inline with a <span> class*/ 
small {font-size: smaller;}
/*not really necessary, but one never knows...use it inline with a <span> class*/

We could also add a second navigation pseudoclass, if there are sub-sections of the navigation. That would look like:

/*these are the sub-section links in the navigation bar on the left side*/ 
a.nav2:link {
  color: #FFFFFF; 
  text-decoration : none; 
  font-weight: 500; 
  font-size:13px; 
  background: transparent;}
a.nav2:visited {
  color: #FF8C00; 
  text-decoration : none;
  font-weight: 500; 
  font-size:13px; 
  background: transparent;}
a.nav2:hover { 
  color: #7FFFD4; 
  text-decoration : none; 
  font-weight: 500; 
  font-size:13px; 
  background: transparent;}
a.navtot2 {
  color: #CDCDCD; 
  text-decoration: none; 
  font-weight: 600; 
  font-size: 13px; 
  background: transparent;}/*the actual page*/

See an example (with the styles in the <head> section).

Back to the Top

Well, that's it - more or less.
We have defined and positioned the areas for the Header, Navigation and Main Content, we have a Footer box, the fonts and links are declared - now we simply fill the page with content and/or start playing around: What happens if I want the Main Content in - hot pink? Go to the style sheet, look for .Content, and change {background: #FFFFFF;} to {background: #FF33CC;}... to return to normal, wait until your eyes stop watering and change #FF33CC; to #F5F5F5; for a light grey.

Oh, yes, there also is a page with a few Tips & Tricks, but in essence: that's it!

Good Luck.