Using External Style Sheets - Part 1

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.

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 150MB 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.

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.

Part 2

 

David Dorn