In web development, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language like HTML. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.
To simplify, the CSS is used to control the presentation of a document, while the HTML describes the structure of the information.
CSS Advantage:
The CSS has lot of advantages over table based design. Still most of the sites are table based but now people are switching over to CSS based design for obvious reasons.
Scalability and Maintenance
In most of the sites, the single CSS can control the look and feel of the entire site. So if the color or font needs to be changed throughout the site, changes need to be made on just one file. This allows the continuous changes on the site with minimal effort.
Moreover, if the site needs to be made compatible for various media like print and mobile devices, the use of CSS will save the pain of creating two copies of each webpage.
An interesting case is one of our projects www.giftsociety.org. The site is using blue background with white font color for content. If the page is printed, the printout will be blank. So in this case, we created a link for “Printer Friendly Version” and used CSS to change the background to white and font color to black. This way, there was no need of two copies of each content page.
SEO Friendly
Since the source code of the page with CSS gets reduced, the keyword density of the page improves. This is something important for search engines as they see the page source and not the design view. For example, if you would like to optimize the page for keyword “PHP development” and this phrase appears 5 times in 200 lines of code; then with CSS, the same phrase will appear 5 times in 50 lines of code. So the keyword density will improve and the search engine will take this keyword as relevant keyword.
Moreover, this helps the new developer to maintain the existing pages.
Fast to Download
The use of CSS makes the html page very crisp with reduced line of code as compared to table based design. On an average, the reduction is to the extent of 50% and more. This way the file size is reduced and the page will load much faster on the browser. Secondly, the CSS is normally downloaded only once and then the browser cache after first page. This is a huge advantage enriching the user experience and saving bandwidth overheads.
Browser Compatibility
There are notions that some browsers dont support CSS but that is not true for most of the common browsers. Most of the internet population use IE, Firefox, Mozilla, and Safari which has excellent support for CSS.
Secondly, the CSS was designed with “backwards-compatibility” in mind. This means that browsers that don’t support CSS at all will still have full access to the content of your pages – your site will be fully usable.
Call to Change
I think the benefits of CSS overweighs the cost of incorporating CSS as the choice for new site development or converting table based sites to CSS based. We have now completely switched over to CSS based design. It will take sometime to port all the existing sites but its just matter of time!
