CSS From the Ground Up - 3

by Joe Gillespie — Apr 1, 2004

After covering the basics of text formatting last month, this month we move on to layouts.

Up until recently, most Web page layouts were achieved using tables. Tables are fairly easy to understand from a conceptual point of view and most WYSIWYG editors make them easy to configure – adding and deleting rows and columns, merging cells together etc. The trouble is that tables were never intended to be used for layout, no more so than Microsoft Excel can be a DTP program. Like Excel, tables are meant for presenting tabular data. They align rows and columns or text or numbers very well but are very restricting if you want to do creative layouts and very quickly bloat the page size and make page maintenance difficult because of the complexity of the markup. Tables are fine if you keep them simple and use them for the purpose they were intended.

CSS opens up the possibilities for Web page layouts in ways that tables never could and simplify both the building and maintenance. You can’t change the look of every page on a site easily if it is based on table layouts but with properly implemented CSS, it’s only a matter of making minor changes to a single style sheet.

So, this month we will examine the basics of CSS layout starting with the ubiquitous CSS box. The CSS box is like a single table cell but much more versatile. You can place it anywhere on a page and give it a wide variety of borders, margins, colors and background effects.

Then, we will see how to make your own custom style definitions that don’t rely on existing HTML elements. When you put custom styles together with CSS boxes, the sky’s the limit. You are well on your way to creating exciting, tableless, all-CSS layouts.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float