Why CSS Is Good For Your Web Site
by: Paul Silver and David Rosam
Cascading Style Sheets (CSS) are used within the HTML behind your Web site as a way of controlling how each page is laid out and what elements on it look like. For instance, you can use CSS to make headings in your copy a standard size across the whole of your site.
CSS has been around for several years and is supported by all the major browsers available today, including Internet Explorer for the PC and Mac, Firefox, Safari and Opera.
Using CSS to control your Web site will give you several benefits:
Makes your Web pages snappier
By using CSS and writing your HTML code to match standards like 'XHTML Transitional' or 'XHTML Strict' you can decrease the 'render time' of your pages. This is the time it takes between downloading the page and actually showing it on screen to your Web site visitor.
When using tables for layout - the traditional alternative to using CSS - and 'font' tags to control how the text on the page looks, the browsers have a lot more work to do before they show the page. Using CSS and the proper DocType for the pages means the browser knows what to expect from the code and can display it much more quickly.
In practice, converting to a standards based CSS layout on one client's Web site reduced the time it took the page to display by almost a quarter of a second. Although this is a very small amount of time, it is more than enough to make a Web site feel much more snappy and responsive, helping it give a good impression to your potential customers.
Makes your Web site quicker to update
As well as making your pages display quicker, CSS makes it easier to make global updates to your Web site. Say you're having a minor change in corporate image and want all your page headings changed from blue to green. With CSS controlling how your headings look, that means changing the colour in one file and the whole site shows the change - a two minute job rather than having to edit every page on the site.
This flexibility gives you the opportunity to do more with your Web site. Want to show your support for Red Nose Day? Again, one file change can put a little red nose next to all of your headers, turn the text red and even make them display in a silly typeface. Turning them back to normal for the next day is, once again, a single file change.
Good for Search Engine Optimisation
Because using CSS removes lots of HTML from your pages as layout and the look of text is controlled through the CSS file, it makes your textual content much more prominent within your HTML. This means the search engine spiders can easily find your textual content, and that your content is generally displayed in one block, rather than being split up into less readable chunks by HTML just to fit it in to your design.
Using 'semantically correct XHTML' - ie heading tags around the headings and sub-headings in your copy, and bold or strong tags around content you wish to highlight - tells the search engines those words are the most important on the page. This helps give the page a boost for searches which match the words which are marked as more important in this way.
Helps in passing the Disability Discrimination Act
Using good CSS and XHTML makes it easy for people with disabilities to change your pages the way they may need to for easy reading. This may be through increasing or decreasing the font size, or having it read to them through a screen reader. The clean page coding that goes along with using CSS means screen readers can easily navigate through your page and find the content, giving a good experience to visually impaired users.
Using CSS and XHTML also helps you comply with the UK Disability Discrimination Act rules for accessible Web sites. This is a valuable side-effect of using this kind of coding and takes no extra development time to be compliant.
Helps browsing from different devices
As well as helping screen readers, using CSS means alternative devices like mobile phones and PDAs can show your content effectively and easily. Although the current market in the West for browsing the Web through mobiles is small, it is growing and by using CSS you can create a Web site which is easily viewable on these devices with little extra effort,. So as more people use them it will be simple to convert your site to work with current or future devices..
Downsides
Currently, Web browsers treat CSS slightly differently, so when your Web site is created you may need slightly more cross-browser testing, and you will need to find a Web designer who understands how to build a site in CSS correctly. Most professional designers and developers are now seeing the benefits of creating standards based CSS sites, but it is worth ensuring that anyone you hire to make your Web site does know CSS before starting a project.
But the downsides are small when compared to the immediate and ongoing benefits of a CSS-based Web site.
About The Author
Paul Silver and David Rosam are Head of Technical SEO and Head of SEO Copywriting at Web Positioning Centre (webpositioningcentre.co.uk). Paul has been involved with the Web commercially since 1996 and David has been writing marketing copy for 20 years, and writing for the Web for a decade.
