Webmaster tips » CSS

Apr 29, 2006
Herman Drost

Top 12 benefits of Using CSS for Web Pages

Average rating:
  • 0 out of 5 Stars
Rate this article

If you are still designing with tables then you are missing out on a lot of the benefits of cascading style sheets (CSS). Tables were not supposed to be used for designing but unfortunately it has been the standard for a long time.

Not any more.

  1. Separate content from presentation.

    An external style sheet can contain all the styles for your web site, then if you want to change the content you only have to edit one style sheet. This is great for a web site that contains hundreds or thousands of pages.

    Imagine if you had to edit each page..it would take you forever.

  2. Google benefits.

    Google gives more weight to content closer to the top of your HTML document. Search engines spider the content that comes first in your source code. With CSS you can easily structure the content to appear first with the rest of the source code following it. This will help outrank your competitors who may have their navigation appear first and their content last..

  3. Fast loading pages.

    Tables slow down the loading of your pages because the spider has to crawl through each table. If your tables are nested inside each other your page will load even more slowly. Designing CSS-based web pages will speed up the loading of your pages considerably because the styles are all contained in one style sheet. 

  4. Small file size.

    CSS will reduce the file size of your html document. If you look at a web page that is designed with CSS you will notice that the size is very small compared to one designed with lots of tables. This also helps reduce load times.

  5. Reduce clutter.

    CSS allows you to get rid of a lot of extraneous html code therefore making your site code neater and cleaner. This makes it easy to alter the code if you need to make edits.

  6. Eliminate javascript.

    Many people surf the web with javascript turned off because they don't want to be vulnerable to viruses or allow pop-ups. This means that the beautiful javascript navigation you produced will not be seen. You can often achieve the same affect with CSS navigation. These allow for rollovers and other pretty affects and are much more user friendly.

  7. Accessibility.

    If you use CSS2's aural properties it provides information to non-sighted users and voice-browser users. The CSS2 "media types" (used with @media rules) allow authors and users to design style sheets that will cause documents to render more appropriately for certain devices such as braille devices, speech synthesizers, or tty (text telephone) devices.

    Learn more about Accessibility Features of CSS http://www.w3.org/TR/CSS-access

  8. Save time.

    CSS will allow you to design your site much faster than tables because there are some styles you can use for every site. I store "often used" CSS snippets in a special file where I can easily access them for any site I design.

  9. Save money.

    CSS will shorten the project development process and eliminate design obstacles that occur from using tables. If designing many web sites you will be able to use the same style sheets or just make a few modifications to them. You will still charge for the design project but it won't take as long as when using tables thus making you more money in a shorter time period.

  10. Flexibility of design.

    You can use pixel precision in your web site designs. By adjusting the margins and padding of the CSS you can easily adjust the position of your content. You can also create very modern designs that can't be duplicated with tables. For example you can use a background image for a header then place your content over it using the H1 tag for better page optimization.

  11. Way of the future.

    The future of the web is moving towards better accessibility with web sites so they can be viewed by as many people as possible. This may be enforced in future web standards therefore if your web site is still using tables or deprecated tags it may become obsolete or disappear from the search engines.

    This could really hurt your business.

  12. Print friendly.

    When a user chooses to print a web page an alternative CSS document can be called up. This document can specify that formatting, images and navigation disappear and just the page content appear on the printed version.

    See creating print style sheets http://www.meyerweb.com/eric/articles/webrev/200001.html

Conclusion

If your site is still mostly using tables for its design, you may want to consider doing a redesign. It may take a lot of work now but if you leave it for too long it will be MUCH MORE work plus will be missing out on all the benefits of CSS outlined in the points mentioned above.

Print! Print this article   Bookmark:

About The Author
Get Highly Effective Web Site Design, Marketing Tips and Tricks by visiting the author's Web Design Discussion Blog at http://www.drostdesigns.com. Herman Drost is a Professional Web Designer, SEO Specialist, Article Writer and Publisher of the "Marketing Tips Newsletter".
Rate This Article
How would you rate the quality of this content? Currently rated: 0 out of 5 stars.
Use your mouse pointer to select as many stars as you want, and press the left mouse button to vote.
  • 0 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Other CSS Articles
Rating: 5 stars
Styling Forms with CSS by WebAssist (Nov 2, 2009)
In many ways, forms are the real workhorses of the Web, but that doesn't mean they have to be plain. Until CSS use became prevalent, little could be done to alter the way forms and form elements looked on the Web...
Rating: 5 stars
10 CSS Tips from a Professional CSS Front-End Architect by Ryan Parr (Jul 22, 2009)
I have been working with web standards based design for many years now and I see many rookie mistakes. When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp...
Rating: 3 stars
13 Reasons Why CSS Is Better than Tables by Matt Jurmann (Apr 8, 2008)
For the past few days, we've been scouring the web searching for the top 13 reasons why Cascading Style Sheets (CSS) are superior to tables when designing a website. Some web designers swear that tables are better than CSS, while others believe that tables are ancient history and CSS is the only real solution to coding a web site's layout...
Rating: 5 stars
Planning your CSS - the definitive guide by Brigitte Simard (Mar 3, 2008)
The more we rely upon CSS, the larger and more complex stylesheet files become. Planning and organising your stylesheet is essential to creating a lean, manageable website. There are many ways of organising CSS code but the following are best practice...
Rating: 5 stars
How to beat Internet Explorer when it comes to CSS by Pete Taylour (Aug 27, 2007)
I am guessing an article on this subject has been posted prior to this one, I should hope a few have! However I hope this will provide a refreshing angle on the subject and branch to some other interesting bits of stuff...