A lot has already been written on the subject of CSS, however, since not much has been said on this blog, I thought to go ahead and write about CSS anyway. This article would serve as a refresher for all those who are well versed with CSS and its benefits and help those who are not so familiar with this topic.
Cascading Style Sheets or CSS is used to style the entire website. CSS cannot itself be used on its own to design a website; it is a tool or an external document with rules that control the layout, colors, styling etc of the web page or pages. CSS can be used with any type of server side scripting languages or simple html. It definitely has many advantages over using tables to control the layout of the web pages which we will discuss in the later sections.
However, if someone is new to CSS, it may be tempting to simply use tables instead of the CSS for a few obvious reasons. First of all, tables are easy to understand and grasp, therefore, it may be tempting to continue using tables. Also, the rendering of the pages using both CSS and tables are almost same across all browsers. Moreover, most clients will also not know the advantages or using CSS over tables, so since they don’t see any obvious difference therefore, they are not likely to complain or ask the designer to use CSS instead.
However, the advantages of using CSS far exceeds the time it takes to grasp the concept of CSS and once the designer fully understands the concept it would actually be easier to use than tables. I am going to highlight a few advantages that CSS has over tables.
1. Faster Loading Of Pages
CSS helps reduce a lot of unnecessary mark-up or code on a web page that you cannot avoid when using tables. To structure a page using tables you will need quite a few of them all nested within each other forming a complex structure. Moreover, you will need a lot of inline code like align, width, height, font sizes, faces, cell spacing etc to style, arrange, and hold the tables in position. This makes the whole page jumbled up and confusing and a lot larger in size with all the extra mark-up needed to arrange the page. With CSS, the mark-up needed is significantly less resulting in page size being smaller, reducing the actual time taken to download the page. Moreover, css files do not need to be downloaded every time a page is loaded; usually it is store in memory or cached the first time it loads. This makes the web pages significantly faster.
2. Better For SEO
Google has made it quite clear that speed of the page matters in SEO. It is one of the factors in determining the ranking of a page in search results. Since CSS makes for a lighter page and hence is preferred over tables and inline styling. Also, since CSS has much lesser mark-up, therefore, it is easier for the search engines to decipher between code and actual content of the website. Remember, it is the actual content of the website that matters; mark up is what we are forced to write to make the page presentable. Therefore, it makes good sense to use CSS which maximizes the ratio of content to code. Also CSS helps to improve the overall structure of the page giving you more control over the elements of the webpage like h1, h2 and other important tags on a page. This all makes the web site’s SEO prospects better.
3. Tighter Control Over Layout and Design
You write CSS code on a separate external css file which controls the layout and design of the entire website. Therefore, to make certain layout or design changes to hundreds of pages of you site, you will just need to edit one css file. The change is reflected immediately on all pages using those styles. In the long run this also helps maintain a visual consistency of the entire site too. When you have hundreds of pages, you will quickly realize that making changes to all the pages is quite a challenging task. There will be times when you update a certain page and forget to do the same for a few. Over time, this leads to inconsistency in the design of the web pages, which can be avoided with the use of an external css file.
4. More Complex Layouts
The layouts created with tables are rigid and not very flexible. Not every type of design a designer envisions may be possible with a table based layout as it uses grids or table based structure to format a web page or layout. However, CSS primarily uses divs which serves a similar purpose as tables. However, divs are layers on a web page which can be stacked on top of each other allowing for more complex designs. The positioning of the layer can further be controlled using the z index which determines the ordering of the layers on a web page.
5. No Spacer Gifs Required
Spacer gifs are transparent images used to fill up blank spaces of a table cell so that it can be filled with a background color. Spacer gifs were used a lot prior to CSS but are no longer needed. It added a lot of unnecessary junk mark up to the web page which is better avoided.
These are a few of the reasons why CSS is better. For those who still profess the use of tables, they are of course entitled to their opinion. However, I would still advise them to go ahead and learn CSS and then weigh the differences between the two and make an informed decision. Moreover, the learning of something new adds more skill sets to a web designer’s arsenal and helps increase their job security in the long run.
