CSS and the End of Tables

CSS and the End of Tables.

In the bad old days of the web, the only way to create even slightly complex layouts was to use tables. Some sites featured silly numbers of tables, one inside the other, to create relatively simple-looking effects. With CSS, though, tables can finally be replaced.

What's So Bad About Tables?

If you've ever worked with a site that uses tables, you'll know just how difficult it can be. Your HTML becomes a mess of confusing rows and columns, with no clear markers of which parts of the page do what. If you want to redesign the site, you're forced to try to extract your content from the HTML and start building the tables all over again. With tables, building web pages felt a lot like building a house of cards.

What's CSS?

CSS stands for Cascading Style Sheets. CSS lets you apply styling information to specific parts of your HTML, identified by tag name, or by IDs and classes you specify. This is done using CSS selectors.

CSS Selectors.

The first thing you need to know about CSS is the basics of how selectors work. There are lots of esoteric and mostly useless selectors, but the basics aren't too hard to grasp.

CSS relies on your tags having classes and IDs – the only real difference between an ID and a class is that an ID refers to one tag and one only, while a class can refer to more than one.

If you just have the name of a tag on its own, then your CSS rules will affect all of those tags. If you use a tag's name followed by a dot and the name of a class, then you'll affect all of those tags with that class. Using a tag, a hash and an ID name will affect only the tag with that ID. Using the hash and ID alone will work on any tag with that ID, while using a dot and class name along works on any tag with that class. So:

p - all paragraphs
p.thing - all paragraphs in the 'thing' class
p#thing - the paragraph with the ID 'thing'
.thing - all tags in the 'thing' class
#thing - the tag with the ID 'thing'

To add rules to each one of these selectors, you just put curly brackets ({}) after it, and then put the rules in that space – that's all you need to do to create CSS.

Useful CSS Rules.

CSS rules look like this:

rule-name: setting;

Here are some of the most useful rule names and the different settings that can be applied to them.

background-color. Lets you set a page's background colour using HTML colours (they look like this: #123456).

color. Sets colours for text.

font-family. Lets you set fonts for your text – you can add more than one font name, separated by commas, in case your first choice is not available.

font-size. You can set the font size in px or em – it's better to use em, as these measurements are relative rather than absolute.

width and height. Lets you specify the width and height of things. You can use px or percentages.

margin. The amount of space around the edges of some content. You can add -left, -right, -top and -bottom to margin to specify these margins individually.

padding. Works the same way as margin, but is for the space between the edges of the tag's box and its content, instead of the space between the tag's box and other boxes.

border. Puts borders around boxes. Takes three settings (width, type and colour), so you have to put spaces between them, like this: border: 1px solid black;

text-align. Lets you align text on the left or right, or in the centre ('center').

text-decoration. Controls some text effects – mainly used to stop links from being underlined, like this: a { text-decoration: none; }

float. Tells content to float over other content, instead of starting underneath it on a new line. This is the tag most often used to simulate the kind of effects that you get with tables – floating a div and setting the main content area's margin to its width is one of the easiest ways to create a sidebar, for example.