Design Techniques

CSS: Cascading Style Sheets

Cascading Style Sheets - Why Bother?

Firstly though, What are they?

A Cascading Style Sheet (CSS) is simply a file (.css) that controls the layout and style elements of an HTML page. The HTML links to the CSS and the browser uses it when rendering the page. In the past browser support has been dodgey to say the least but with recent browser releases support has increased due in part to Web Standards movements like WaSP. Designers can now use CSS to lay out an entire web page and not just to format the text.

How is a CSS different from a table layout?

To put it simply, Cascading Style Sheets were designed for page layout. Tables are for tabular data, that is, data where there is a relationship between columns/row headers, and the data in the table cells. This relationship is lost when tables are used for laying out an entire page. CSS, on the other hand, are all about structure. If you have a style called icon and nest that in a style called navigation you have a very definite structure.

The other major difference is that the page style is defined once in a CSS where a table based style is defined on every page. This means a CSS layout can be altered in one place affecting all pages where changes to a table based layout require a rework on all pages (which is both time consuming and frustrating).

CSS: The pros and cons

Firstly the good stuff:

  1. Smaller file sizes: A CSS file and the HTML structure combined are smaller than a comparative table based layout. This is simply due to the lack of all those nested table and formatting tags. The HTML markup for styles includes a link to the style sheet and a series of divs/spans defining where styles are applied.
  2. Style changes can be made in one place: Site wide changes to styles (fonts, colours, positioning etc) can be made in one place and in parallel to content entry.
  3. Cleaner HTML: With all the style definitions out of the HTML the code is simply easier to understand. Table layouts were damn near impossible to code by hand where CSS is stupidly simple. The page content is easier to see and the markup is easier to understand.
  4. XML/XSL: When going the next step and separating the content using XML, CSS comes into it's own. XSLs are easier to understand and code for the same reason as #3.
  5. Web Standards: CSS are W3C recommendations and are a consistent approach for designers and developers when laying out HTML pages.

And now the downers:

  1. Browser Support: The biggest restriction to date. The browser support in 4 level browsers in virtually nonexistent. 5 level browsers and up are much better with the fundamentals but are a bit dodgey when it comes to consistency. Designing in CSS currently requires the odd workaround for complex layout but the upside is that support will improve over time. This restriction does however force web designers to start learning what content actually is and what it means to be a web designer now.
  2. Actually that's it. CSS is simply an excellent layout tool and we should have been using them ages ago.

Static Positioning

Static positioning simply means the position content will appear on the screen without the Cascading Style Sheet turned on. This is quite an important part of the screen design as it provides accessible content for users with CSS turned off and users who are using devices that don't use CSS in general (screen readers, older browsers).

Static positioning can be used to advantage when dealing with Netscape 4 especially. Due to its low level of CSS support it is often best to hide the styles that define the layout of the page and render the content in its static position. This gives users of Netscape 4 access to the content and navigation and is certainly more desirable than seeing badly rendered styles which are likely to make the content illegible.

  • Change to layout style (default)
  • Change to static positioning style

While use of static positioning is not visually impressive it allows users to choose the device they wish to access the content with and allows designers and developers to use web standards technology. Note: If you are currently using Netscape 4 you will be seeing this statically positioned by default.

Complex Layouts

CSS is very capable of creating the same complexity of layout that tables offered with one major advantage....layers. Designers can now build elements on top of each other without having to do all that slicing and dicing. It requires a bit of lateral thinking (but designers rock at that anyway) and a slightly different approach to building but CSS layouts, in my mind, offer far more options for laying out a page.

Some good places to start if you are interested in learning CSS are:

 
Interface 1
Interface 2
Interface 3
Interface 4
Interface 5