Style Sheet
Description
SiteBuilder 2 uses Cascading Style Sheets (CSS) to control how text is displayed. It's key advantage is that a single document controls the settings for all similar HTML tags, so to change how headlines look site-wide, just change the style sheet! Much more convenient than applying HTML styles to each text item. The use of style sheets also increases accessibility, since it's easy for the user's browser to override the settings in favor of the user's settings. And text results will be more consistent for more users overall.
The document frames_style.css is the style sheet for this template set. It is brought into each of your site's pages, including the localnav.html file (setting the link style), main.html and all the subpages as well, with a bit of code that looks like this:
<link rel="stylesheet" href="frames_style.css" type="text/css">
It's best to have just one style sheet per site, so documents in subdirectories will refer to the stylesheet at the top level of the site.
To make use of the style sheet, simply apply standard format HTML. For example, for any given block of text you can set it as a:
paragraph <p>text</p>,
headline 1 <h1>text</h1>,
headline 2 <h2>text</2>,
headline 3 <h3>text</h3>,
...etc. In Dreamweaver, look for the "Format" pulldown in the Properties Inspector. In addition, there are a number of custom tags that can be applied to any text. In Dreamweaver, select the text in question, then use the command sequence Text > CSS Styles > [style] where [style] is one of several default custom styles. Dreamweaver MX has a "Design" palette to speed style application. You can also use Dreamweaver to create new custom styles.
- This text is "smaltext"
The style sheet for SiteBuilder 2 is further documented in the Style Guide page found within the template set. You can read a more thorough introduction to Style Sheets in the Advanced Web Training site.
About pre-existing HTML formatting
You will find that you can apply CSS styles over pre-existing HTML formatting, i.e. formatting defined with the <font></font> tagset, however it is best practice to clear these styles before applying CSS-friendly formatting. You can clear all selected text with the HTML Styles tab in the Design palette of Dreamweaver MX, however this will also clear all your bold and italic styles, which you may find convenient to keep. So instead, select the range of text you want to clear, then in the Properties Inspector, drag "Format" to "Paragraph" the "Font" (or "A") selector to "Default Font," the size selector to "None," and the Text Color chip to the strike-through symbol. This removes all the pesky HTML styles without removing bold and italic.
The information on this page will become more clear as you begin to work with your localnav.html, main.html and subpages files. Come back to this page then, if you need to.
 Printer-friendly
page |
Home |
|
This document was last modified:
Thursday, 13-Mar-2003 12:47:47 PST
|
|
