Why you should convert to CSS

Why you should convert to CSS

Introduction

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?

• 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

• 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

About the Author

» left by Jeff Harris

from United Kingdom 6 years 183 days ago.

Very good article

Respond to this comment

» left by centre

from CJ design forums 5 years 343 days ago.

Wow! This is a very impressive article! You've done so much work.

Respond to this comment