The CSS Layout, Why You Should Use It

News Feed

Why CSS?

There are lots of reasons to use a CSS layout. By a CSS layout I don't mean you just set your font color and removed the underline from links using CSS. But I mean the very positioning, the layout, of everything is done with CSS. The alternative option is tables, which is not a good way to layout a site for many reasons. But I am not saying don't use tables. Tables have a purpose, namely to display tabular data, much like you would put in Excel. But they are not meant for the layout of your site. They were not designed to do so. So they are an inferior method of doing it, only succeeding because of a number of hacks invented in the nineteen nineties. The whole idea of CSS is to separate content from layout and style. Letting to change one, with out the other getting in the road. Greatly simplifying the maintenance of the web site.

One very important reason that anyone should consider learning CSS for is maintainability. If you have 500 web pages, and you need to move something. How do you go about it? Well with tables you spend a few hours editing every single page to move the item. In CSS you change ONE file and the job is done. Ok, you could just chose not to change anything. But that will mean you site is never quite what it could be. Or if your doing the site for someone else, paid or not, you just might not have a choice. It might take longer to edit that one CSS file, than to edit 1 page, but it is going to be a lot quick than editing 500 pages or even just 5 of them. If you don't believe me have a look at CSS Zen Garden which is a contest of how much you can change the look of the page by just editing the CSS file. You will notice that sometimes the menu is on one side sometime on another. Some even split the content up into several columns. The point is, you can do just about anything with CSS should you want to.

The next reason is page size. CSS page tend to be much smaller. The lack all the <tr> <td> littered every where (which also makes the code more readable). Smaller pages sizes if it means nothing else, does mean a slightly higher search ranking. This is because search engines like a high content to code ratio. It can also mean $$$. Smaller pages mean less disk space, and less bandwidth. If your getting hard pushed for either of these CSS could be your life line. Not only does it mean smaller pages, but the CSS file only gets downloaded once and is saved by the browser, preserving even more bandwidth.

Terminology

It is very important that you understand the words I use in the tutorial. If you have read CSS tutorials or articles littered around the web you might know all these terms and can skip this part. But if your just begging out you will need read this.

I mention fixed, liquid and semi-liquid layouts. Fixed means that the content area is give a width, and it never changes. It is always so many pixels wide. Liquid means that the content adjusts width with the browser window, just the way water flows to fill a container. Semi-liquid means that only some elements of the page, such as a menu, remain a fixed with. The rest flows out to what ever width is needed.

Other terms I may use a element, block level element and inline element. An element is just another name for a HTML tag, but I prefer it over HTML tag because I think it is a better technical term. A black level element has a line bread before and after it such as a DIV and H1 elements. Inline element don't, examples would be links and SPAN elements.

Index

Next >>
Index