Speed up your CSS

If you don’t know what stylesheets are you can learn about them from the CSS tutorial.

Let’s assume you have defined a style named “headlines” then your HTML using CSS would look like this:

<span class=”headlines”>This is a headline</span>
bla bla bla<br>
bla bla bla<br>
<br>
<span class=”headlines”>This is another headline</span>

Compared to the plain HTML equivalent:

<h1><font face=”verdana” size=”5″ color=”#FF0000″><b><i>This is a headline</i></b></font></h1>
bla bla bla<br>
bla bla bla<br>
<br>
<h1><font face=”verdana” size=”5″ color=”#FF0000″><b><i>This is a headline</i></b></font></h1>

It is obvious how CSS shortens your pages since you don’t have to specify the entire style each and every time its used. All you need to do is refer to it with a class=”stylename”.

However, with respect to speedpages it gets even better. CSS definitions can be saved in external files rather than at the top of each page.

This has several advantages, the most obvious are:
When saved in a file of their own it can be cached on the visitors local machine and doesn’t need to be loaded for each and every page.
When kept in a single external file you as a designer can change style elements across the site in one move!
The techinique is simple: Save the CSS in a plain text file and place a link in the head of your pages using this syntax:

<link rel=”stylesheet” type=”text/css” href=”fileName.css” />

Note: The textfile should NOT include the <style type=”text/css”> and </style> tags that you’d use if you defined the style on the HTML page itself.