Continuing on with my foray into the world of CSS I have started scrutinizing every webpage I find. Using the web developer toolbar for FireFox I check almost every website I visit to see if they’ve implemented CSS. The results are quite interesting and here I have included some website images with and without their CSS styles applied.

First-off, download the web developer toolbar here for FireFox and see things like this for yourself: Download it Here

Once you have the toolbar installed you can see a website without its CSS by doing the following:

1) Navigate to the website you want to see
2) On the WebDev toolbar click CSS –> Disable Styles –> All Styles

www.Facebook.com

Naturally I wanted to show off a website that most of internet faring populace have visited at least once so I chose Facebook. The first image is the site with all its CSS styles enabled:

FB with Style:

Now heres what it looks like without style!:

Quite a difference! What makes this so amazing for me is the sheer power of CSS. Working with the HTML would be simple because it would be the straight forward content within HTML DIV elements which are easy to work with.

www.News24.com

The next target is South Africa’s most prominent news website. I was actually horrified when I saw this. I can’t even imagine what it must be like when someone asks their team to change something, it cannot be a pleasant experience!

Site with Styles enabled:

Now, for this next image I have disabled the styles and highlighted any table cell borders on the page using the WebDev tool. Imagine needing to work on the following HTML document:

There way too many nested tables there to work with. The reason I decided to highlight a news website was because of the disabled members of our community. If they have to try and use a screen reader on this website, the screenreader would be reading useless information to them and they would have no clue about what was going on in our country. Besides that fact, making just one small mistake in a nested table could the entire design of the website to fail!

If you now have the WebDev tool installed, go and test the following websites with AND without their CSS styles enabled.

1) twitter
2) jaiku
3) pownce
4) picknpay
5) BBC
6) CNN

My personal opinion is that the CNN website is probably the best CSS driven news website out their so kudos to them! If I had to choose betweening maintaing CNN.com or News24.com purely based on the HTML, I would choose CNN.com any day as my life would be so much easier!