CSS 101

Reducing code clutter and improving design

by Bill Marshall
of http://www.oyster-web.co.uk

Last updated: 12 Sep 2007

Does the code of your website look a bit like this?

<table>
<tr> 
<td height="14"></td>
<td></td>
<td colspan="2" valign="top"><font color="#999999"><b>
<font face="Arial, Helvetica, sans-serif" 
size="2" color="#666666">
<font color="#999999"><b><font face="Arial, Helvetica, 
sans-serif" size="2" color="#666666"><a href="news_events.htm"><img 
src="images/arrow_square.jpg" width="14" height="14" 
border="0"></a></font></b></font></font></b></font></td>
</tr>
</table>

This particular example (and I've seen a lot worse) uses 10 lines of code to display a linked image in a table. A lot of the code is superfluous and probably the result of repeated editing with a WISYWIG editor.

Those of us who started back in the mid 1990s used to work with code like this:

<h1>Main Header</h1>
<p>Some text  relating to the header</p>
<h2>Header 2</h2>
<p>some more text relating to the sub-header</p>

4 lines of code - 4 sections of text. The search engines know that anything in the heading sections are important to the subject of the page. The only problem is that it looks boring - it will display at the default sizes for Headings and paragraphs.

The reason the second example looks so simple is because it has no styling - there wasn't any then. However the font tag came along and people forgot about h2, p, li and the rest, and what they were actually for. Once tables were added to the mix and were used for layout purposes it became common to see many lines of code to display a single line of text. "Paragraphs" were often just blocks of text separated by table cells. Documents became unwieldy and didn't conform to any standard. There was no structure or hierarchy. Accessibility and classification got more and more difficult.

So how can we use code that is more like our second example but retains the styling power of the first?

The answer to this question is Cascading Style Sheets. Initially these were simply a powerful method of styling the font, colour, size etc. of the text content. Very useful admittedly, especially since they could be centralised in one file rather than being document specific. However they didn't stop there. The real power came with CSS-P, which allows positional formatting to be included and removes the need to use heavily nested tables to lay out the designs.

Lets take a look first of all at the basic styling capabilities of CSS. You can apply a style to any HTML element in its basic form. eg a p tag can be given a default size and font style and margin, so without doing anything else any text that is in a paragraph will use these parameters. Similarly any of the h tags or the list tags. If you are asked to increase all the 2nd level Headers in the site by 2 pixels and to switch the main body text from Arial to Verdana then as long as you've used consistent structure you can do that with two simple edits in the main CSS file - even if the site has thousands of pages!

By adding styles to link tags (a, a:link, a:visited etc.) in the CSS you can alter how the links behave - rather than blue and underlined you can change then to match your site's colour scheme. They can have background colours on "hover" or they can be made to look like 3D buttons by giving them borders of differing brightness, and even giving them the visual effect of being pressed.

What if you want a section in the middle of some text to have a coloured background and a different font and colour - like a magazine feature box? This is where the div tag comes in.

When they first appeared many web designers weren't sure what they were for. They are in fact just containers, having no real structural effect on their own. Their power comes from the styling that can be applied to them and which cascades down to elements within them. Looking at our magazine feature example we can insert a div around the text we want to feature. Then give that div either an id or a class, or usually both. By adding parameters to the id and the class in the CSS file we can then style both the div itself and any of its Content in any way we wish. So for instance we can give it a border of any thickness or colour, solid, dotted or dashed, with a margin to move it away from the surrounding content and a padding to space the text within it away from the edges. We can give it perhaps a dark coloured background and switch the text to white to show against it, and use a different font style and size from the rest of the text on the page. The result is a much more visually interesting section that catches the eye and clearly delineates it from the rest of the content.

Even if this is as far as you take CSS, you'll find that your code is far easier to load, understand, and maintain. In later articles we'll explore some more advanced capabilities to take your designs a step further.