Introducing CSS: CSS & tables.

In the previous entrie on Intorducing CSS I gave you some reasons to why you might be interested in CSS. We also had a look into some CSS basics. Today we will have a look a CSS tabless design and compare in to a site design with tables. Before you continue reading the following resources might be interesting:

CSS is easy! - Kevin Yank at sitepoint.
Selectutorial - CSS selectors - Maxdesign.
W3 Schools CSS resource

div or span

First, it is important to know the difference between a <div> and a <span>.

A <div> definse a devision/section within a page. You could compare it with a container within your site. Wich can be easily used for an overall site layout.

<div>
Your content.
</div>

A <span> definse an inline section. Wich is more likely to be used for a specific string of text.

<p>This is a paraghraph with
<span>a certain string</span>
within a span.</p>

ID or class

When deciding wether to use an ID or a class, the following should be concidered:

Classes can be repeated within a same document. ID's can only be used once.
It is possible to define more than one class to an element.
When in conflict ID will be chosen over class.

CSS & tables

When creating a desing with tables there is always the trouble of nested tables. First you would creat an outer table, the container. Then you would place - within your table - your header, menu, content and footer in the form of another table. These are a lot of tables and yet you don't really have a layout yet. This can be done faster and lighter with CSS. Using CSS your document could look like the following:

<div id="container">

  <div id="header">
  </div>

  <div id="menu">
  </div>

  <div id="content">
  </div>

  <div id="footer">
  </div>

</div>

All that is left for you to do is to position your containers and stye them up a little. At glish.com you can find some great basic CSS layout techniques.

If you want to have a look at what is possible with CSS I recommand the CSS Zen Garden.

In short some of the advantages of going tableless. Smaller documents, faster pageload, full control over layout, cleaner code, greater useabillity.

In the next entrie we will have a look at some difficulties when desining with CSS.

14 december 2003

css, Design, English, Web