PPC> Web building> Design  

Using External Style Sheets

David Dorn explains why using external style sheets in your Web can be not only a time saver, but a design boon.

If you’ve read Iain Laskey’s excellent treatment of the CSS functions available to you in all your HTML pages, you’ll know that there’s loads of control over how your pages look. While Cascading Style Sheets are very useful just for defining the look of a chunk of text, or a table, they’re also very useful for making site-wide changes to a design, and, even better, for speeding up the loading of your pages. How? By using external style sheets.

External Style Sheets

No matter which HTML editing program you use, the top ones all have access to external style sheets built into them. How you apply them differs in each one, but the code that is entered into each page is identical. In some respects, Dreamweaver is easier to use to set up an external style sheet than FrontPage – it shows you each line or class definition in a well-structured dialogue box – but the end result is the same.

In order to use an external sheet (a .css file) you must first create it, of course. In there, you apply definitions to styles – here’s an example from one of the PPC .CSS files:

.standfirst { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #333366; font-weight: bold; font-style: normal}

.crosshead { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; color: #CC3300; text-align: left; line-height: 12pt}

.linkbox { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #CC3300; text-align: left ; font-weight: bold}

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}

.CategoryHead { font-family: Arial, Helvetica, sans-serif; font-size: 18pt; font-weight: bold; color: #000000}

You’ll note that each line defines a particular style we might want to apply – and that style will appear in exactly the same way on every page that is linked to the .CSS file for its style sheet.

So, by that style sheet, some of the styles we use look like this:

Article Ttle

Standfirst

Crosshead

Body

Link (have a hover over it, and click it – it goes nowhere but you’ll see what happens)

Now, if we decide that the look needs to be changed, and since every page in the Practical PC web is linked to exactly the same style sheet, all we need to do to change the look is to change the definitions in the style sheet file. Thus, we could change the font size of the Standfirst style to, say, 14point, change its colour to black (or anything else), change its weight, its font family – even whether it’s underlined or not.

In a Web site the size of Practical PC (which is now over 80MB in size with thousands of files and pages), we could never even contemplate doing that individually on each HTML page – it would take forever. But by linking every page in the Web to a single external style sheet, we only need to edit one file, and the look of the whole site changes.

Demonstration!

To demonstrate this, I’ve copied this page in its entirety to a new page, which you’ll find here, and applied an edited version of our standard CSS file to it – I’ve altered all of the styles you’ll see on this page, so it will look very different, but if you compare the source code for each one, you’ll see only one difference – and that’s which external style sheet it’s linked to. Otherwise, it’s identical.

If you don’t like the “new” look, click here to get back to the normally styled page.

The beauty of this approach is that all the font and style information that would otherwise be embedded into the page is completely removed, and your browser references the CSS file in which all the styles are defined to discover how it should render every item on the page. That makes page download times much quicker, and since the CSS file is cached on a per-session basis, rendering is also speeded up – which all makes for a much faster site.

Should you use it?

I think you should, yes. Aside from speeding up the site for your visitors, it also makes it much easier to produce a site that’s consistent in its look, and, when the time comes that you want to change the look of the site, that job is very much simpler and quicker than it otherwise might be. Flick between the two pages – check it out!