Why you should convert to CSS
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.
