PPC> Web building> Design  

Defining styles in an external CSS stylesheet (1)

Now that you know you can use external stylesheets to make your pages more consistent, David Dorn shows you how to define styles – how to create the external stylesheet, in fact.

An external stylesheet is, simply a list of declarations of the rules by which a browser will display an HMTL page. It specifies the display attributes associated with particular HTML constructs – essentially combinations of tags, property names and values.

Syntax

All CSS declarations follow the same format:

TAG {property: value; property: value}

You can group tags in a declaration (officially called a selector, by the way), so you could have:

H1, H2, H3 {property: value; property: value}

You can also group properties in a selector, and to make your external stylesheet easier to read, put individual properties on new lines:

H1 {

color: #CC3300;

font-size: 12pt;

font-family; Verdana, Arial

}

Note that each line is terminated by a semi-colon – each property in a selector list must be separated from the preceding one by a semi-colon, although the last property doesn’t need a trailing semi-colon. This selector could have been written as:

H1 {color: #CC3300; font-size: 12pt; font-family; Verdana, Arial}

Inheritance

One of the beauties of the CSS format is that if you neglect to define a particular tag, it inherits the properties of any enclosing tag:

<H1> I got my first <EM> real</EM> six string </H1>

Would take the properties of H1 as we’ve already defined it, and would simply add Emphasis (embolden) the “real”. That’s because the <EM> tag is fully enclosed within the <H1> tag in the HTML code.

However, if you defined the <EM> tag to be, say, in black (#000000), then the “real” would be in a different colour from the rest of the sentence – in fact, every occurrence of text carrying the <EM> tag would be black.

Contextual Selectors

That might not be what we want, though, which is why you can declare a contextual selector:

H1 EM {

color: #000000;

font-size: 12pt;

font-family; Verdana, Arial

font-weight: bold

}

That says that every occurrence of <EM> in an <H1> tag should be black, 12pt Verdana, bold. All others occurrences of <EM> would simply be bold – or however you define them to be inside particular tags.

This is particularly relevant to links. While it would be very simple if your links were all the same size, that’s not always the case – you may, for instance, have a link in an 18pt headline – which would look silly if, in your external stylesheet, you had the declaration:

A {

color: #000000;

font-size: 12pt;

font-family; Verdana, Arial

font-weight: bold

}

Which would set all your links to black, 12 point bold verdana.

However, if you included:

H1 A {

color: #000000;

font-size: 18pt;

font-family; Verdana, Arial

font-weight: bold

text-decoration: underline

}

Then in an <H1> tag, every link would appear as 18 point black underlined bold verdana. In other tags links would be unaffected by the stylesheet – unless you’ve defined them differently, of course.

Next time, we’ll look at one of the most powerful functions of external stylesheets – classes, which are basically subsets of previous selectors, and upon which Practical PC depends for its look!