If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

Introduction

What is CSS? - I hear some of you ask. Well, CSS stands for Cascading Style Sheets and they have been around since the early 1990’s believe it or not.

The Wikipedia definition (changed so that it makes sense!) is as follows:

CSS (Cascading Style Sheets) is a language that describes the presentation
form of a structured document.

An XML or a HTML based document does not have a set style, but it consists of
structured text without style information. How the document will look when printed
on paper and viewed in a browser or maybe a cellphone is determined by a style
sheet. A good way of making a document look consistent and easy to update is by
using CSS, which Wikipedia is a good example of.

So, why should we use CSS?

There are many benefits of utilising CSS on your web pages. Before you skip to the disadvantages, I can tell you now that the advantages easily outweigh the bad points. Below is a short, descriptive list of reasons to make the change:

  • Save on bandwidth

    The more HTML code you use, the large the file size of the page. It doesn’t take a genius to work that one out - so the most obvious solution is to cut down on the amount of HTML (something that Yahoo! might want to consider sometime, probably saving them £100,000’s). CSS will certainly help to cut down on the amount of code you use, for example, replacing all of your <font> tags (which are now obsolete by the way) with simple style declarations.

    In reducing your file size, you will in turn reduce the amount of bandwidth your website consumes each month, hopefully saving you money. Typically, a heavy HTML coded website can measure up to 80KB’s in size (without taking images or other media into consideration) - using CSS can cut down the file size by approximately 30-40% - a potentially massive saving if your website is popular. To find out how much bandwidth you would save, check out this bandwidth calculator, provided by CJ Website Hosting.

  • Cleaner, clearer looking code

    Usually, CSS code is written in an external style sheet - you can however, use inline styles. Because of this, not only will your page load faster because a) external files are cached by most browsers and b) a stylesheet loads in unison with your web page - it also makes for much cleaner, clearer code.
    Still not convinced? Take the example below as hard evidence:

    This code is written without CSS:

    <table border="0" width="100%" cellpadding="10" cellspacing="0">
<tr>
<td>
<font face="verdana" size="7" color="#C71585">
<b>Welcome to my website</b>
</font>
</td>
<td align="center">
<font face="verdana" size="7" color="#00FFFF">
My website is entirely written using HTML, nothing else.
</font>
</td>
</tr>
</table>

    You can achieve exactly the same result using the following CSS…

    body
{
font-family:verdana,arial,helvetica;
font-size:100%;
}
h3
{
font: bold 140% verdana;
color:#C71585;
}
#content
{
color: #00FFFF;
}

    …and the following (tiny piece of) HTML code:

    <h3>Welcome to my website</h3>
<div id="content">
My website is written using the latest in web technology!
</div>

    Much nicer, I’m sure you’ll agree.

  • Easy to update = less time consuming = cheaper to maintain!

    If you use an external CSS file (which I advise you to do), simply changing the style declarations in this one file will allow you to change the appearance of your entire website. For instance, in the example above, you could quite easily instruct the browser to render the heading tag to the right of the page or you could make the content wrap at 100 pixels - all by changing the CSS. Don’t get me started on what you can achieve with bulleted lists!

  • Accessible pages and DDA compliance

    Visitors who are blind or visually impaired will prefer a CSS designed website far more than one not using CSS.

    This is due to the fact that CSS follows web standards endorsed by the World Wide Web Consortium. Because of this, special web browsers (such as text only browsers which read the content out-loud to the visitor) can interpret the content on the page.

    CSS will help make your website DDA compliant. The DDA is the Disabilities Discrimination Act, the Act makes it “unlawful for a service provider to discriminate against a disabled person by refusing to provide any service which it provides to members of the public”, specifically mentioning websites.

    Another benefit of using CSS is variable font sizes. CSS will allow you to specify a font size as a percentage, doing so will allow visitors with poor eye sight to enlarge the text size. Tip: Try increasing the font size of a page by holding down ctrl and scrolling the wheel of your mouse (if it has one). You will notice that most websites do not allow you to increase the font size (unless you are using the Firefox browser which forces it) because they use pixel measurements. And those that work but use <font> tags (such as Google) are actually breaking the accessibility guidelines.

    Generally, websites designed in css are accessible on all sorts of devices including mobile phones and PDAs. The majority of hand held devices will simply ignore the CSS, leaving behind a readable (but bland) web site behind. A table design however is likely to render too wide for the viewable region.

  • Increase your popularity in SERPS!

    Sorry, there I go again with the acronyms. SERPS stands for Search Engine Result Pages - the set of links returned by a search engine in response to a user query.

    I can imagine that some of you are thinking “pull the other one! How can using CSS make my website rank higher in Google or MSN!” - well, extensive use of tables and obsolete tags can confuse search engine spiders which crawl your website for content. Some can even confuse code with content, although the major search engines seem to be very good at stripping out every possible HTML tag or JavaScript snippet - but it takes up valuable processing power that they would rather spend elsewhere.

    It doesn’t take a genius to work out that, like humans, the search engine will start reading from the top of your web page and just like humans they want to find out how relevant this page is as soon as possible - so cutting down the amount of code will make it easier for the robot to find the relevant text. Research suggests that you will also score “brownie points” with search engines for having standards compliant code that can be rendered across all mediums.

    Tip: A combination of well written HTML code, fully utilised CSS and unique, well referenced content is the key to a higher search engine ranking.

Disadvantages of using CSS

As previously mentioned, there arn’t any real disadvantages of using CSS - the pros far outweigh the cons. To put it another way, CSS ‘div based’ design versus table based design is a bit like comparing Liverpool Football Club to Gresley Rovers. There’s only ever going to be one winner and everybody knows it.

So on to the only disadvantage I can think of…

  • Old browser issues

    Old browsers, such as the early versions of Netscape and Internet Explorer. may have a hard time displaying CSS, especially as CSS-2 is now available to use and only the most recent browsers support it.

    The solution? Download the latest browser! Which reminds me of potentially one more disadvantage; giving yourself a headache whilst attempting to get your website to look identical in Internet Explorer and Firefox - doh! Oh well, practise makes perfect.

In Conclusion

If you are interested in re-designing your website to use CSS, I would start by learning the basics. Find a simple CSS tutorial on the web and work your way through some more complex CSS examples. Then, have a go at doing your own! You will more than likely hit some problems with cross-browser compatibility but you should find help on webmaster forums such as those found at www.webmasterworld.com and www.sitepoint.com.

About the Author
James Crooke is a software engineer at CJ Website Hosting. Research interests include Object Orientated Web Applications, SEO and Accessibility in web design.

Filed Under: CSS, HTML, How To, Internet, Quick Tips, Web Design 
Tags: