Benefits of using CSS3 - Cascading Style Sheets

Cascading Style Sheets separate the content of an HTML page from the presentation

It might help to think of CSS3 as a sequel, and like all good sequels you’ll need to understand a little bit about previous releases to get the most out of it.

The idea of Cascading Style Sheets is to separate the content of an HTML page from the presentation. There are two main benefits from this:

• Each page on a site can reference the same style sheet, and changes made to this document can affect the whole site.
• The mark up is kept clean and easy to read by both humans and search engines.

That’s pretty much it. Doesn’t sound like much does it? It’s pretty useful stuff though.

To illustrate the first point, imagine that you run a website with 100 pages and for some reason,  and I can’t think for the life of me why you would, you think it would be a good idea to change the font used through the site, to comic sans. Well, without 'style sheets' you would have to go into every page to manually change all the relevant tags in the mark up and this would take a rather long time, as well as being incredibly infuriating. (Doubly, should the client then realise that comic sans is not actually to their liking and want to change it back to arial!) With style sheets you can simply change one file and it’s 'job done'!

Then there’s the benefit of cleaner mark up. The content to code ratio has long been considered important in the world of search engine optimisation. If cleaner code gets you better results then it could ultimately mean more revenue for your business and who doesn’t like a bit of extra revenue these days?

So what of the very first incarnation? CSS 1 came along at the tail end of 1996 and allowed you to have control over, amongst other things, font styling, colours, tables, images, margins and borders. While this all sounds great, it wasn’t very successful and not many people used it. The browsers of the day simply didn’t support it very well, so what was the point in using something that, for most people, simply wouldn’t work?

Eighteen months later the imaginatively titled CSS 2 was released which allowed you to do even more things. Now you were able to control positioning more accurately, layer items on top of each other and even add funky shadows. It still didn’t work!

A few years later came CSS 2.1 - an obvious naming convention. The idea was essentially to fix some bugs and get things working uniformly across the browsers. People had started taking up style sheets with more enthusiasm now, as more and more browsers were sticking to standards that, on the most part, had been adopted. But there was a fly in the ointment...the dreaded IE6. Microsoft had decided to do whatever they wanted when it came to implementing CSS support, and as a result, has become the thing of nightmares. In some cases it was possible to make a site look fantastic on every single browser on the market but IE6 would render nothing but a blank screen. It was infuriating and still to this day, causes headaches, as larger companies can be reluctant to update their systems.

This brings us on to CSS 3. As with the previous releases, it essentially just builds on what came before it, allowing you to do a whole host of fun and exciting things like rounded corners, gradients, text shadows, multiple columns and more...and guess what, it still doesn’t work! Actually that’s a little bit harsh. When I say it doesn’t work, I mean that it still isn’t fully supported across all browsers but after more than fifteen years we’ve learnt an important message... it doesn’t matter. If a design is well thought out and works well, do we need to get 'hung up about things' if it doesn’t look exactly right in 'older browsers'? Of course not! If a button doesn’t have a rich gradient background, rounded corners and a drop shadow effect, could it still look good? Of course it can! If the main text doesn’t have a drop shadow on some browsers, so what? It’s still exactly the same font, colour and size. Design just requires a little bit more thought and a general acceptance that things aren’t going to look 'exactly' the same, across all browsers. On the plus side, you’ll get faster loading times and much richer looking sites on the browsers that do support CSS3.

And besides... although it’s not yet supported, CSS 4 is just around the corner!

Please check out some of our client case study examples. CSS3 is just one the many web consultancy areas Rocktime can help your business with. If you want to find out how we can help your business be found faster in the search results because CSS coding can be read very fast by search engines, then please contact us for a Sales quote.

What have been your experiences with HTML5 / CSS3 webapps?

Authors: Foz, Thom, Fiona Anderson