Information Technology Systems & Services
The promise of Cascading Style Sheets is to separate the structure (paragraphs, headings, lists, tables, etc.) of web content from its presentation (font, object placement, indentation, etc.). HTML describes the structure and Cascading Style Sheets control the presentation. That's the theory, anyway.
Before making style sheet rules, take a look at "Style Sheets Set Your Page Free."
Why is It Called "Cascading Style Sheets?"
A Cascading Style Sheet means multiple style sheets may be blended together to affect a page, and the closer the rule is set to the tag element, the higher the rule's priority, loosely speaking. As with anything in life there are exceptions, and the following is simplified, but conceptually it's a good place to start. Here are the levels of priority with "1" being the highest:
- apply the rule to an individual HTML tag
- embed rules for the entire page before the
</head>tag - link to an external style sheet (useful for site wide consistency)
I often apply a site wide style sheet by importing an external style sheet. If needed, I override it locally with embedded rules and/or applying the rule to the tag. An example would be the indenting of paragraphs. I like this as the page is easier to scan for blocks of information.
Sometimes this may not be useful (note this brief paragraph is not indented).
All I have to do is tell that particular paragraph not to indent, and the indentation is gone because highest priority is given to the HTML tag overriding the external rule. Let's look at the paragraph rule I just mentioned:
- The external style sheet has the rule
p {text-indent:1em}and is applied to every page in the web site. - The external style sheet also has a class called ".NoIndent"
.NoIndent {text-indent:0em}and is called in the HTML tag.
A class is a rule in the style sheet that only gets applied when it's called. I could have put the rule in the <p> tag itself:
<p style="text-indent:0em">
but I use this often enough it is easier to have the rule defined as a class in the external style sheet and call the class in the tag:
<p class="NoIndent">
Current Rules of the Style Sheet Road
- 5.x or later browsers are preferred.
- The page should degrade gracefully for older browsers meaning the page should still be fully usable even if it does not look pretty.
- The user should be able to override your settings.
What Style Sheet Rules are used in this CSS Site?
Some of the rules set in the external style sheet are:
- font to verdana (good for electronic reading)
- font-family to sans-serif (also good for electronic reading) in case the user doesn't have verdana installed
- indenting of paragraphs
- hovering on link highlighted
- size and style of headings set
- leading to 1.33em (good for electronic reading)
Of course, all these settings may be overridden by the user.
When you're ready, move on to "Defining a HTML Tag."