Using External Style Sheets - Part 3
David Dorn considers the methods and advantages of classes in external stylesheets
A 'class' is, basically, a subset of a selector or declaration. Let's say you've declared the colour of the <H1> tag to be black - you can declare a subset of <H1> to be white. It will retain all the other properties of the parent tag or selector, but it must be both named and separated from the parent tag - the declaration would look like:
H3 { font-size: 14pt, font-weight bold, font family: Verdana, color:#000000 }
H3.white { colour: #FFFFFF }
When you call the new class (which is, in this case '.white') in your HTML the resulting code would look like:
<H3 class=white> blah blah blah<H3>
So, that line would take on all of the properties of the <H3> tag, but they would modified by the properties of the '.white' class - anything declared in the '.white' class overrides declarations on the tag - so you get white text in <H3> style!
Universailty of classes
Classing goes a step further, as you might have guessed from the preceding paragraph. You can define a class all on its own:
.crosshead { font-family: verdana, font-weight: bold, color:#CC3300, font-size:10pt }
actually defines the crosshead class on the PPC pages - note that the class name is preceded by a 'dot' - this is vital, as it tells the CSS handlers in browsers that you are defining a class, and not a tag.
Once you've defined a class like this, you need not then define every possible combination of every tag with every class - the class modifies every tag. Thus, you can have all of the following lines of HTML, and the results would look the same for each:
<H1 class=crosshead> blah blah blah </H1>
<p class=crosshead> blah blah blah </p>
<EM class=crosshead> blah blah blah </EM>
In each case the class declaration as I've shown it above overrides the tags (H1, p and EM) to render the text.
Unfortunately, you can only use one class per tag - so you couldn't, for instance, have both the .white and .crosshead classes nested inside the <H1> tag - but that shouldn't be a problem, as you can define a separate class to provide you with the stylistic properties you would achieve by nesting in that way.
Links:
One of the most commonly changed elements in a Web site is the link - some Webmasters delight in making their links look different - and using CSS externally is a great way of doing this:
A:link {font-family:verdana, font-weight:bold, font-variant:smallcaps, tex-decoration:none }
Is but one way of classing all your links. That line sets all links to be bold, small caps, with no underline and they'll be in Verdana as a font.
There are other link declarations:
A:hover
A:active
A:visited
And here's how we apply them in the PPC stylesheet:
a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: bold; color: #003399; text-decoration: underline}
a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: bold; color: #333366; text-decoration: underline }
a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: bold; color: #CC3300; text-decoration: none}
Neat bits
There are two other clever tricks you can play with what are known as pseudo-elements:
P:first-line { color:red }
And
P:first-letter { colour:maroon, font-size:300% }
The 'first-line' modifier allows you to define how the first line of a paragraph should be rendered - in this case I've picked red as a colour. You can use all the other properties as well, of course. The first-letter controls - guess what! - the first letter of the paragraph (and, indeed, any quote marks that may go along with it) - so the first-letter statement above gives you a first letter that's three times the size of the rest of the characters in that paragraph.
NOTE: these two pseudo elements are not supported in IE 5 and below (5.5 and 6 and above do support them) and Netscape 4.5 and earlier doesn't either. - be aware of this. However, the rendering degrades well in browsers that don't support it - readers just don't see anything different.
