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:
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:
you'll see a CLASS attribute as part of the tags:
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.