Advantages of CSS

What is CSS and why is it useful?

CSS stands for "cascading style sheets". A single CSS file can contain positioning, layout , font, colors and style information for an entire web site. The file can be referenced by each html file on the site.

CSS is a means of separating the content of an html document from the style and layout of that document. It's useful to be able to do this for a number of reasons:

Making changes to the layout

CSS makes it very easy to change the style of a document. Let's say we wanted to move the picture in the title of this page to the right by 10 pixels. This would be a nightmare in a table based design. We would have to open every page and alter the table width manually.

Fortunately we have used CSS, and all we have to do is open our CSS file which stores the layout of the site, and change the number relating to the position of the image. That will change his position throughout the whole site.

The look and layout of a site can be changed beyond recognition just by altering the CSS file. This makes CSS indispensable for large web sites.

File Size

Probably the mostly useful feature of CSS is that all of the style and layout is removed from the html, so the html page size is very much smaller. The CSS file is downloaded just once by the visitor's browser and re-used for different pages on a web site. This reduces the bandwidth requirements for your server and also ensures a faster download for your visitors.

Search Engines

A search engine robot will normally consider the content in the start of your html code is more important than the text towards the end of the code. For a table based page the contents of the navigation bar will normally show up as the page description in search engine results. With a CSS page the navigation can be moved to the bottom of the source code, so the search engine displays your content instead of your navigation.

Accessibility

Separating style from content makes life very easy for visitors who prefer to view only the content of a web page, or to modify the content. These could be blind or partially sighted people who might use a screen reader to interpret a page.

Consistency

Layout and position of navigation can be completely consistent across a site. This was previously possible only using frames.

Disadvantages of CSS

CSS does not work consistently in different browsers. Microsoft Internet Explorer and Opera support CSS in a pretty logical way. Unfortunately their logic does not conform to current CSS standards.

Netscape and Firefox conform more closely to the standards, so a site could look quite different on Internet Explorer from the way it looks in Firefox. This discrepancy restricts the CSS features that can be used on a site - because Firefox is becoming more and more popular the site must be designed for both Firefox and Internet Explorer.

Dreamweaver MX design view has it's own set of limitations (although I'm told Dreamweaver 2004 is an improvement).

CSS doesn't work at all in very early versions of Internet Explorer and Netscape. These browsers will display your page as plain html. This is not necessarily a problem - a quick look at our logs suggest that less than 0.1% of visitors are using browsers that are incompatible with CSS, and they will still be able to use our pages, just without the layout.


Next: Replacing tables with CSS

HOME - ACCESSIBILITY - SEO - SPECIFICATION - CSS - USABILITY - STANDARDS

Introduction to CSS

CSS Layout

Styling text with CSS

Web Accessibility

Website Specification

Search Engine Optimisation

Learn CSS

Web Design Guide

Web Standards

Business web design
VORD Web Design