CSS Rules! Part 2
Home > Build > Programming
> CSS
by
Don Herion
(1) (2)
(3) (4)
In
my previous article on CSS I laid out the advantages and pitfalls of using Cascading
Style Sheets. In this article I will go deeper in the power of using CSS.
Order
Out of Cascading
The words 'Style Sheets' has been explained. The word
'Cascading' refers to the ability to utilize multiple styles in a CSS compliant
browser. It also means the browser will follow an order for those styles, in effect,
cascade down the 'styles' within the document. Browsers do follow a specific order
- 'External CSS' gets priority, followed by 'Embedded CSS' and finally 'Inline
CSS.' That does not mean you cannot combine all three types of CSS in a Web site.
Another
aspect of 'cascading' is inheritance. For example, if a 'style' commands that
all text be italicized in a paragraph, then all tags within the paragraph will
accept, or inherit, that style element, unless you specifically state otherwise.
Class is Everything
Adding 'Class' attributes to
your style sheets gives you additional flexibility in controlling the appearance
of your Web page. 'Class' extensions can empower Web designers to have multiple
'paragraph' styles within a single CSS document. For example:
| <style>
<!--
p.one {
font-family:
times;
font-size: 12pt;
}
p.two {
font-family: courier;
font-size: 9pt;
}
-->
</style> |
With this syntax you can create two different paragraphs styles in a HTML document.
Now any paragraph with the following syntax will be affected by the first style:
| <p class="one">
This is an example
of using CLASS extensions.
</p> |
The
class extensions can be anything but I would advise using something descriptive.
Grouping CSS
Another way to use CSS is to group multiple 'Selectors',
or 'Properties' and 'Values.' Grouping multiple selectors is a quick way of applying
a single style to different tag attributes. For example, say you want to convert
all header styles in an existing document to a single unified style. Here is a
simple example:
| h1, h2 {
font-family: courier;
font-size: 14pt;
} |
Now all h1 and h2 header styles will
be courier and 14 pt. You can of course edit this style later if you wish to go
back to an old style layout.
Grouping 'Properties' and 'Values'
is more complex however. The order used in grouping your elements is very important.
Font weight and style must precede properties like size and font type. Here is
an example:
| p {
font: italic normal 18pt courier
} |
You'll notice there are no semicolons used, only a space
separates the various attributes. In some cases you may have to use semicolons.
A style for margins will require a semicolon at the end.
