The Benefits Of Cascading Style Sheets

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.

Greater Control Of Presentation

CSS allows for more control over the presentation of your web pages. Given how little control web designers can sometimes have it’s nice to know there’s a way to get some of it back. Aside from the fact that CSS has more formatting options over HTML such as options to control the spacing and leading of text, CSS can also determine in what order the page itself displays. If you do have some heavy graphics you can place them last in your code to ensure your visitors can at least have some text to read while waiting for your grahics to load. With tables it’s all or nothing. you won’t be able to get one part of your table load before another part.

CSS also gives you greater control over different media. You can organize your code to make it easier for screen readers to follow, making for a more accessible web page. You can learn more about the Accessibility Features of CSS at the W3C.

One of the more common uses of CSS is to present the same page differently to different media is in making your documents printable. Web pages have not always been printer friendly. Using CSS it’s easy to tweak a few styles to get a completely different look on the screen and through the printer. Visitors to your site don’t need to do anything special either. They can print your pages right through the browser and get a document unburdened with background colors and images that will only waste their toner or ink.

Search Engine Optimization

While it’s not generally agreed by everyone it’s likely that CSS can help get your pages found in a search engine. Because your CSS site contains less code and has a simpler structure it’s easier to read not only for you, but also for search engine spiders. Allowing search engine spiders to get through your code faster means your web pages can be indexed faster. There’s also a chance that less code will be interpreted as text improving the keyword density of the page. With less code to muddle through it’s easier for search engine spiders to determine what the page is about. All other things being equal the web pages that use CSS to layout their design are more likely to rank higher in search engines.

The benefits of cascading style sheets are many and given the support of modern browsers there’s no excuse for not learning to use them. If everything above hasn’t convinced you consider this. Much of HTML has already been deprecated and at some point in the future it will no longer work in browsers. When that time comes many of today’s browsers will fail to display and need to be recoded. Those that are already making use of cascading style sheets will continue to function normally.

Download a free sample from my book, Design Fundamentals.

Leave a Reply

Your email address will not be published.

css.php