CSS: Weight loss for your code

by Sasch Mayer

One of the main drawbacks of traditional HTML web design is the tendency to produce almost insupportably large file sizes with anything but the simplest of page designs since formatting requires a substantial amount of code per component unless a rather plain 'default look' is to be retained.

Although there are a number of contributing factors, the burden of responsibility can largely be placed on the shoulders of font and other style tags which have to be added to every text element if an aesthetically pleasing result is to be achieved.

With web sites becoming more complex in their structure and appearance, this led to ever increasing document sizes as the years went on until the sheer amount of code required for presentation far outweighed the text contained within the page leading to slow loading times, a serious headache for search engine spiders and the coining of the phrase 'code to content ratio'.

Help became available to designers in the shape of CSS (Cascading Style Sheets).
Originally conceived in 1994 to provide an effective means for designers to control the appearance of their web pages, CSS became a W3C recommendation in 1998 and has been gradually gaining popularity within the web design community since about 2003.

By removing bulky text formatting code from HTML documents and placing it in a central data file which controls the appearance of the entire web site, CSS not only provides a means of achieving a more uniform overall appearance, it also serves to substantially reduce the size of each individual HTML document.

For example; to display text in a certain font, colour and in bold would require the following HTML code:
Note that < > brackets have been replaced with [ ] brackets to display the code correctly:

[font color="#0000FF" face="Arial, Helvetica, sans-serif"][strong]Example Text[/strong][/font]

Lots of code for very little content, as you can see.
With CSS controlled design however, the text can be displayed in the same manner with the use of a span tag controlled by the Style Sheet:

[span class="C1"]Example Text[/span]

Same end result, half the code.
If you repeat this process fifty or sixty times within a single page your code will be much more lightweight and easily indexed by search engines (if it is also W3C compliant).

Those of you not yet making use of Cascading Style Sheets to reduce the flab in your HTML would be well advised to read up on the technique.