Building upon Strong CSS Foundations

Posted on Sunday 25th March 2007 @ 2:47am BST

If you design websites, you probably aim to make sure your site looks good in all the major browsers. Typically developers and designers will tend to start creating a site using Firefox to constantly refine the layout, partly due to the more reliable style rendering and the huge amount of extensions available (Firebug and Web Developer are two worth checking out).

Once the layout is ready, the next stage is making sure it looks the same in other browsers such as Internet Explorer, Safari or Opera. Something that will save you a large heap of time, is realising that a browser has its own internal styling rules which define things like how tall an H1 tag is or how much padding a list item has... unless you override the value in your CSS, it will use the internal default. Now you may be thinking that this on it’s own is pretty obvious and how can knowing this save you time? Well each browser doesn’t use the same internal styling rules and while they tend to be similar, there are always subtle differences... a difference that could cause you to curse and swear at your monitor because you’ve spent the past hour trying to get that menu to line up in both Firefox and IE when all that was required was to set the padding to zero!

Now imagine you could specify all the browsers to use the same internal styling sheet! You could then build your site’s CSS on strong, level foundations that are the same in all the major browsers, resulting in less work when it comes to cross-browser testing. :) In–fact you don’t even need to imagine because Yahoo have come up with the CSS reset – a single CSS file you link to before any other CSS and it gets you back to a level playing field! Yahoo have details of how to make the most of this file on their developer network and best of all - it’s free!