Understanding the cascading style sheet (CSS) file

The Dynamic HTML Standard Edition template includes a single CSS file used by all of the generated HTML files. The file, standard.css, is included in your support directory and is copied to the output directory when you generate your project. The CSS file is referenced in the <HEAD> section of your HTML files:

<link rel="StyleSheet" href="standard.css" type="text/css" 
media="screen"> 

The <LINK> tag is the only location where the CSS file is identified. But through the document, you'll find HTML codes that reference components of the style sheet. Instead of a paragraph like this:

<H1> 
This is heading 1 text. 
</H1> 

you'll see a CLASS attribute as part of the tags:

<H1 class="Heading1"> 
This is heading 1 text. 
</H1> 

The CLASS attribute refers to a style called Heading1, which is defined in the CSS file.

The first section of the CSS file defines the document defaults:

/* Document Defaults */ 
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-
size: 10pt; font-style: normal; font-weight: normal; color: 
#000000; background-color: #FFFFFF; letter-spacing: normal; text-
align: left; text-indent: 15pt; word-spacing: normal} 
a:active { color: #0000CC} 
a:hover { color: #CC0033} 
a:link { color: #3366CC} 
a:visited { color: #9999CC} 

The next section defines the block attributes, or paragraph styles. These are the items that are called by the CLASS attribute. The standard.css file includes style definitions for each of the paragraph and character styles found in the WebWorks Publisher Standard Edition 7.0 template.

/* Paragraph Styles */ 
.Body { margin-left: 30pt} 
.BodyRelative { } 
.CellBody { } 
.CellHeading { text-align: center; font-weight: bold; color: 
#003366} 
.GroupTitlesIX { font-size: 16pt; color: #003366} 
.Heading1 { font-size: 18pt; color: #003366 ; font-weight: bold; 
margin-top: 20px} 
.Heading2 { font-size: 15pt; font-weight: normal; color: #003366} 
.Heading3 { font-size: 12pt; font-weight: bold; color: #003366} 
... 

The Heading1 style is defined as having a font size of 18 points, using the 003366 color (blue-gray), a boldface font, and a margin of 20 pixels from the previous paragraph (or tag). If you change any of these settings in the CSS file, all the entities that use the CLASS=Heading1 setting will automatically change.

The last section of the CSS file provides definitions for character-level formatting:

/* Character Styles */ 
.Code { } 
.CodeEmphasis { font-style: italic} 
.CodeStrong { font-weight: bold} 
.Emphasis { font-style: italic} 
.EmphasisUnderline { font-style: italic; text-decoration: 
underline} 
.Strong { font-weight: bold} 
.StrongUnderline { font-weight: bold; text-decoration: underline} 
.SubScript { } 
.SuperScript { } 
.WebJump { } 

The definitions in the character styles section are also called by CLASS tags. For example, you might see this:

<STRONG CLASS="Strong">This text will be bold.</STRONG> 
 

Note: The use of a <STRONG> tag along with a Strong class attribute may seem redundant, but it's necessary for browsers that don't support CSS files. They will use the <STRONG> tag and ignore the CSS formatting information.


Quadralay Corporation
Voice: (512) 719-3399
Fax: (512) 719-3606
info@webworks.com