PPC> Web building> Design  

Defining styles in an external CSS stylesheet (2)

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.

Read part one

Read part two