Since all content will be placed within table cells I like to set a style for the TD tag. The one shown below controls the font size, font face, and the leading of the text.
TD {font-size:12px; font-family:Verdana, Arial, sans-serif; line-height:16px;}
Here is a sample of the text:
Font and text properties are the most commonly used properties. Cascading style sheets make a distinction between "font" properties and "text" properties. Font properties control text size, style, and formatting. Text properties determine text alignment, leading, and allow a first line indent.
Since the <P> tag will also be used to control the text formatting I add that tag to the CSS style.
TD, P {font-size:12px; font-family:Verdana, Arial, sans-serif; line-height:16px;}
Finally I create a class of TD which will display a mauve background color and format the text in white, bold, italic and slightly larger text.
TD.color {background-color:#CC9999; font-size:14px; font-style:italic; font-weight:bold; line-height:18px;}
Here is a sample of this text body text samples
When I create the template, the table cell which displays in mauve must have this code <TD class="color">
You may be wondering why I don't just hand code in the mauve color and text formatting on every second level page. The major reason is that using CSS makes it easier to change the look in a quick and consistent manner. If I want the background color to change to blue and the font size to be reduced to 12pt, I can simply change the style which is saved on the external CSS page and all second level pages will instantly change.
In creating this page I threw around a lot of terms which you may not be familiar with. CSS concepts are covered in the CIS 58.51B, "Creating Web Pages 2 - HTML" class. I have included the CSS lesson from my online course in case you need to review the concepts. In addition there is a videotaped demonstration of the CSS and SSI concepts which can be viewed in the Santa Rosa or Petaluma libraries or the CIS lab on the 3rd floor of Maggini Hall. Ask for tape #4.
| home || begin || logos || photos & collage || rollovers (2) || animation || 2nd level || templates |