If you’re not using cascading style sheets in your web pages yet shame on you. CSS has excellent support in today’s browsers. It’s relatively easy to learn and produces better and cleaner code than applying all those styles directly to your HTML.
Using CSS modularizes your websites in much the same way that programmers have been modularizing software code for year. Modular code in your website allows for greater design consistency and easier maintenance. CSS is the new standard and has been now for several years. It’s time to separate the structure of HTML and the presentation of CSS.
So if we’ve been using HTML for years and creating all sorts of great websites with them why make the switch? Some of the advantages of using CSS are:
- Easier to maintain and update
- Greater consistency in design
- More formatting options
- Lightweight code
- Faster download times
- Search engine optimization benefits
- Ease of presenting different styles to different viewers
- Greater accessibility
Separation of Style and Structure
The basic idea behind CSS is to separate the structure of a document from the presentation of the document. HTML is meant for structure. It was never intended for anything else. All those attributes you add to style your pages were added later as the viewing public demanded it. All those additions though make HTML clumsy and work against it’s main purpose of structuring a document. HTML is there to let a browser know that this block of text is a paragraph and that block of text is a heading for this paragraph.
Without all the extra HTML for styling the structure of your document is much more readable making it easier to update with out breaking the document. All of your CSS can be moved to a separate file making it easier to update your styles as well. Before to give each of your pages a background color you would have added bgcolor=”red” to every body tag on your site. What happened once you realized that red wasn’t going to make for a good background color and you wanted to change it to a light gray. With a small site it’s not such a big deal to open 10 files and make the change from #ff000 (red) to #eeeeee (light gray). But what if you had 100 pages? 1000 pages? To code that background on every page of your site using CSS would have required a single line of code, body {background:#ff000} in your style sheet. The one line of code can easily be changed in seconds to affect a sitewide change in background color.
If you need to be convinced about how easy it is to change your site using CSS and how different you can get a site to look by editing just one file check out the css Zen Garden website and take a look at how much can be easily changed by separating structure and presentation.
Faster Web Page Download Time
Using cascading style sheets generally leads to less code behind your web pages which helps the downoad times of a page. When browser sees a table in your code it needs to read through all your code twice. Once to understand the structure of the table and once again to actually display the content within the table. The extra time slows up your page. Using tables in the layout of a web page generally leads to a greater use of images on that page. Images are often the heaviest element of a pages and are usually the major culprit in slowing down your pages. Sure the images can be optimized to make them smaller, but they are still larger than a line of code and each image requires another request by the browser to the server.
Because you’ve placed all your CSS in one separate file the code will be cached in the browser after the initial request. It doesn’t need to be downloaded again for subsequent pages. Your table code needs to exist on every page of your site and must be read again every time a new page is requested even if the table structure is the same on every page.
In Eric Meyer’s interview with Mike Davidson of ESPN, Mr. Davidson estimated that 2 terabytes of bandwidth were saved each day after they switched to CSS on the ESPN website.