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.