Anatomy of CSS

The tutorial below will take apart an external style sheet and show you what all of the code means.  It's actually very simple to learn.  It also allows you to have greater control over how your pages display to your visitors.

The Body Definition

BODY {
background-color : #FFFFFF;
font-family : Verdana, Arial, sans-serif;
font-size:  80%;
color: #000000
margin: 0px;
scrollbar-arrow-color: #000000;
scrollbar-face-color: #7D9AC9;
scrollbar-3dlight-color: #7D9AC9;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #7D9AC9;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #FFFFFF;
}

Just like the body html tag, you can set the background color, font family, font size, font color, line spacing (the distance between lines) and much more.  Font sizes can be set in pixels (14px), in points (12pt), as a percentage (100%), and as a relative size (smaller).  We prefer using a percentage so the viewer can adjust the text size in their browser as needed.

The scrollbar items are just for fun.  Just like it says, it sets the colors of the right-side scroll bars on the screen.  This is only viewable on IE 5.5 and higher and Netscape 6.2.  These attributes are ignored by older browsers and your viewer will see the standard grey bars.

You can set your color parameters in hex code as shown, or by name (black), or by RGB such as  rgb (000, 000, 000).  We think using the hex code is the easiest.  We tell you the hex colors used on the "Read Me" page of your template!

The Paragraph, Table, Cell and List Item (bullets) Definitions

P, TABLE, TD, TR, LI {
font-family : Verdana, Arial, sans-serif;
font-size : 100%;
}

Since quite a bit of your text begins with the Paragraph tag <p> or is inserted into a table or cell, we can specify the font family, and the size of the text.  In this case we have specified that we want all paragraph text to be 100% of the text size specified in the body attribute above.  This brings you text that is the size on this page.  You can, of course, make your text larger or smaller by changing this percentage.

Hyperlink Definitions

A:LINK { color : #7D9AC9; text-decoration: none; }
A:VISITED { color : #7FBCAA; text-decoration : none; }
A:HOVER { color : #000000; text-decoration : underline overline; }
A:ACTIVE { color : #A980A6; text-decoration : none; }

If your web template came with a theme, the link colors are specified in the theme itself.  It is, however, very convenient to be able to change the link colors by using the style sheet rather than "modifying" the theme.

You can state whether you want your links underlined and even apply a "hover" effect to your text links.  There are several eye-catching effects you can apply to text links to make them more noticeable and appealing.

Note:  The hover effect is not supported by older browsers and will be ignored.

Heading Definitions

H1  { font-size : 120%; font-weight : bold; color : #E8878E; }
H2, H3, H4, H5, H6 { font-size : 100%; font-weight : bold; color : #E8878E; }

These are your heading properties.  Because search engines place emphasis on heading tags, we have made the first heading <h1> to be 120% of the body font size and specified that the text shall appear in bold and then defined the font color.

The remaining headings (H2 - H6) are specified in one statement to be one color and one size.  Again, these attributes are also set within the theme, but can be changed through the style sheet without having to "modify" the theme.  If you want to use the theme headings' default  font sizes and colors, simply delete this area from your style sheet.

Special Classes:

.catalog {
font-family : Verdana, Arial, sans-serif;
text-align: justify;
padding: 20px;
line-height: 15px;
}

The flexibility in style sheets comes with the use of "classes".  A class can be a variety of elements that are grouped together under a name which begins with a period.

In this example, we have created a class called "catalog".  When we apply this class to a table cell, that cell will have the following:

• Will use the appropriate font and/or font family
• Will have the text justified
• Will have a cell padding of 20 pixels
• Will have the text lines spaced 15 pixels apart

.hottopicone {
background-color: #AAD2C5;
padding: 5px;
line-height: single;
font-size: 75%;
}

In this example, we have created a class called "hottopicone".  When we apply this class to a table cell, that cell will have the following:

• Will have a specific background color
• Will have a cell padding of 5 pixels
• Will have the text lines single spaced rather than expanded
• Will have the font sized at 75% of the body font attribute (the text will be 25 percent smaller)

a.top:link { color: #FFFFFF; text-decoration: none; font-weight: bold; }
a.top:visited { color: #000000; text-decoration: none; font-weight: bold; }
a.top:hover { color: #FFFFFF; text-decoration: underline overline; font-weight: bold; }
a.top:active { color: #FFFFFF; text-decoration: none; font-weight: bold; }

From time to time, you may find that your normal link colors do not work well in a specific area.  Maybe you have added a color to a table cell and now your links do not show up.  You can use special link colors for cases like this.

When you right-click on your link to assign the hyperlink properties in FrontPage, click on the "Style" button.  You can then type in the word "top" (without the quotes) into the class area.  Your links will then take on the characteristics that you describe here.

[Note:  This will not work on a FrontPage web-bot navigation item!]