HTML is what the web is made up of right? Well yes and then again no. We've all been using it to make our sites since the begining of the web and as things have gone along we've taken the tools available and tweaked and hacked them to give us the results we wanted and at the end of the day that was fine. The thing is that HTML was never meant to do all these things, tables are meant for tabular data not holding page layout together despite the results that can be acheived.
As the web has matured though we have increasingly been provided with a new range of tools designed to fit our needs and to do so in a technically correct manner.
The dawn of CSS
A few years ago Cascading Style Sheets(CSS) first came on the scene and we all breathed a sigh of relief as we realised we could now control our font sizes more accurately and could make sweeping design changes from a central location rather than updaing every page of our site. For a time it was good, we had a new set of toys to play with, the problem is that actually we were falling into the same old trap of using the tools incorrectly. The job was getting done, but it could have been done so much better.
What's it all about
CSS is all about seperating content from layout. We keep our content in one place without the colours, spacings, dimensions etc and instead all this information is taken from our stylesheets and applied to it when it hits the screen.
With a little practice it becomes evident how important this distinction is. By keeping the two seperate we have the ability to re-use the content in combination with an entirely different layout. We can 'flick a switch' and watch our whole site re-order itself on a whim or perhaps more importantly for a re-brand. Of course we can take it one step further and provide specific layouts for different viewing devices such as PDA's or other mobile devices.
What does it take
There are essentially two parts to getting started with CSS. Perhaps the first thing to do is to start using eXtensible Hypertext Markup Language (XHTML). This is the successor to HTML and at first glance may sound a bit scary, but it really isnt. It's HTML but done properly. It is there to produce contextual markup, correctly divded up into it's logical parts, headings, paragraphs and the one to keep your eye on, lists. A page of XHTML should leave you with content structures with all the unneccesary attributes and waffle removed, so now we have our source of content, seperate from layout.
We can then take our CSS and lay it on top to give the look we want. There is of course a learning curve, but once you grasp the capabilities of the tools you now have and start flexing your style sheet muscles the thought of going back to the old ways of tables and spacer graphics will leave you cold.
Is the table dead then?
Yes we no longer have to rely on tables for our layout and can frankly do so much more without them that it's scary, but we are now also free to use them properly, in the way they were intended. Where we have tabular data to display we can still turn to our old friend the table, but with the control of stylesheets they are even easier to use. It's about using the correct techniques in the right places.
Cross browser compatibility
One of the main excuses for avoiding the CSS route and for cutting corners when using it is that despite the standards that have been drawn up we still have the age old problem of different browsers implementing things differently. Yes there is a degree of headache involved here and it wouldn't be fair not to mention it, but for each problem there is a work around available and it should normally only take a google search or two to find it. Of course once you've fixed them once you'll know just what to do next time. So there really isn't much of an excuse for turning a blind eye to certain browsers that might not be behaving the way you expect.
But is it really worth it?
It can be very tempting to cut corners, we all understand the pressure of deadlines, but there is a reason these tools are available to us, when used properly they make the lives of developers easier by allowing us to build sites faster and more efficiently. From a business perspective they make sense given that updating the site is now far easier and therefore more cost effective. In building out sites in this more structuraly correct manner we also find that they are naturally improved for search engine optimisation.
In todays market though, perhaps the most important reason for getting to grips with CSS layouts is the issue of accessibility. We all need to start developing sites that meet the requirements of the Disability Discrimination Act (DDA) for both moral and legal reasons. The only route to acheiving this is through XHTML and CSS.
The bottom line
Style sheets are something we all need to get to grips with, theres a learning curve involved and at times you'll want to bash your head against the table until it all goes away, but once you get to grips with the logic behind it all there is no better way. It will take practice, but the support is out there in the form of mailing lists, articles, blogs and the other usual suspects, so get started now.
It makes sense from both the developer and business points of view so go on, you know you want to.
Last updated 22 May 2004