the rGPedia

What is CSS or what is a CSS file? It’s a great way to separate web content from its design properties.

by Marcos Hernandez

First of all, what is CSS or what is a CSS file?  A CSS (Cascading Style Sheet) file contains styles that reference a web page’s elements and areas with design properties such as fonts, colors, positioning, etc. CSS is universal on all web browsers and platforms and has been in use since 1994 (http://www.w3.org/Style/LieBos2e/history/).  It’s a great way to separate web content from its design properties.

CSS table-less design means that instead of using table rows and columns to design a web layout, you use referencing ids and classes and give them design properties like height, width, color, etc. in an imported CSS style sheet. This same CSS sheet can be used through the site on several pages. The result is a web layout similar to a table layout, but with several benefits.

1. More Design Control.
CSS allows incredible design control as opposed to just using tables.  CSS styles can go beyond dictating height, padding, etc. It allows you to be very specific in order to achieve the layout you want; position background images, give different border dimensions, apply different margins, or add padding for print-like,  ‘illustrator’-like results.  There are several other examples, of course.  The possibilities are endless.

2. Easy Design Changes.
Suppose you are in charge of a large multi-page website.   It’s a typical website; a header, two columns (a left column for navigation and wider right column for content) and a footer. This layout is pretty consistent throughout the pages of your site. Then you get an urgent call from management saying that they don’t like the powdered-blue background-color on the navigation bar and they want to change it to a pine-green.

If you don’t have style sheets you have to go to that particular table or <td> tag and change the background color on each page, which can take minutes or hours.   If you do use style sheets you can find that particular style on the sheet and change the background color only once, saving you a lot of time.

3. Clutter-free HTML.
Website layouts with tables, especially with several nested tables, are cluttered with <table>, <td>, <tr> and <font> tags.  This can make it difficult for someone other than the creator to edit a page.

With a table-less CSS design, you can not only lose the clutter, but you can organize the page for content.  You can use simple id reference names to identify an area of the page.  For example, <div id=”header”>, <div class=”footer”>.  This can be a great guide for someone updating and maintaining a page.
Plus, a designer can lose the cumbersome design elements like spacer graphics and horizontal rulers because margins and borders can be dictated with CSS styles.  CSS does more with less code.

4. Accessibility
Probably the most important benefit of CSS is that it separates the design from the content because all of the design elements are located in the CSS.  This allows screen readers to read only content and not HTML tags and elements. 
CSS pages also load faster. It may not make a big difference on broadband connections and new computers, but it makes a huge difference for older, slower computers and dial-up.  
Having an accessible CSS site makes your site more universal and accommodates users of a broad demographic.

Thoughts on CSS

The world of web is always changing and involving, but CSS (all versions) can be one of the web’s few constants.  If anything, there is a more of a need for CSS and table-less CSS design with the popularity of blogs and content-driven sites.

Here are some great sites on CSS and CSS layout design.

http://www.w3.org/TR/CSS-access - for basic info and standards
http://www.csszengarden.com/ - for inspiration
http://www.cssbeauty.com/ - for articles
http://www.alistapart.com/ - for coding tips