CASCADING STYLE SHEETS
DESCRIPTION
Cascading style sheets let you assign several properties at once to all the elements on your page marked with a particular tag. For example you can display all your H1 headers in a particular size and color.
Styles can be applied in three ways:
- Local - within the individual tags on a page. (CASTRO page 248)
- Internal - within <STYLE> ... </STYLE> tags, which are placed within the HEAD tags of each page. (CASTRO page 244)
- External - a LINK to an external ASCII text file is placed within the HEAD tags of each page. (CASTRO page 246)
Of the three methods, External style sheets are the most useful. By using one style sheet, linked to multiple HTML pages, we can change the formatting on all the linked pages by simply editing the style sheet file.
The "cascading" aspect of style sheets comes from the precedence of one usage of styles over another: Local styles over-ride internal styles and internal styles over-ride external styles.
Cascading style sheets are one of those great ideas that suffer from browser incompatibility. Netscape, in particular, offers less than satisfactory support for the CSS specification. Therefore, it is important to test pages with styles applied in both IE and Netscape and note the differences in the way your formatting is applied.
The CASTRO text book offers an excellent introduction to style sheets. It is strongly recommended that you spend some time this week exploring the ideas presented there.
EXAMPLE
Check out this example of style sheets at work. Follow this link using both Internet Explorer and Netscape and note the differences in the way the browsers display the same style sheet modified page.
RESOURCES
Bradsoft offers a free style sheet editor and a lot of information on style sheets.
