Why CSS?

CSS seems to scare a lot of new site builders. You spend all this time learning the ins and outs of HTML, and now just to get some color, you have to learn another language? Can't we just do all the color stuff in HTML?

That exact line of thought is why CSS was invented! Once upon a time, colors, fonts, alignment, and other bits of styling were set in HTML—causing messy, unreadable pages that couldn't be easily redesigned. This page should set the stage for walking you through CSS: what we once did, and how much more efficient CSS truly is compared to it.

Introducing the font element

The year is 1997. Netscape has quickly gained dominance in the web browser world with their Navigator browser, which introduced a number of features that would take the web by storm (in ubiquity, not necessarily in good taste, my friends): JavaScript, frames, cookies, and proprietary visual-based elements like blink, marquee, and font.

Netscape realized that folks building their sites wanted more pizzazz and visual flair and introduced a new element called font to give them it. It does what it says on the tin: it allows the page builder to set the size, color, and unofficially, the face of the text wrapped in it:

<font color="red" size="+1">Important text!</font>

Important text!

Seems fairly straightforward! You want red text? You set some red text. Why isn't it done like that?

Why was the font element such a bad idea?

Document bloat

If you want to make one heading purple, the font element is a good idea! But what if you had ten headings on a page, and you wanted them all purple? You'd have to give each heading its own font element. This quickly bloats your page, making it harder to read your own work among the (implied) visual flair.

<h2><font color="purple">Heading one</font></h2>
<p><font size="-1" color="black">It might not seem like such a big deal, but this gets hard to keep track of quickly.</font></p>

<h2><font color="purple">Heading two</font></h2>
<p><font color="black">Suddenly, the words "font" and "color" appear in your markup more than real words!</font></p>

<h2><font color="purple">Heading three</font></h2>

Harder to update

But what if you wanted to make all those headings red instead now? You might do a find-and-replace, but what if you only wanted some headings red? You'd have to go through the entire page and change only the ones that you wanted to make red, one by one.

A nightmare to redesign

Now imagine you had an entire site, several pages, of red and purple headings, and now you wanted green and blue centered headings, plus some paragraphs being right-aligned. You'd have to go through every single page to fix every last one of them. Again, a find-and-replace can help with this slightly, but only so much. It's a manual job in an already messy field.

<h2 align="center"><font size="-1" color="blue">Heading one</font></h2>
<p align="right"><font color="black">This time, we want smaller headings that are blue and green. We've also got some links and some alignment stuff going on.</font></p>

<h2 align="center"><font size="-1" color="green">Heading two</font></h2>
<p><font color="black">You might as well just rewrite the entire page every single time!</font></p>

<h2 align="center"><font size="-1" color="blue">Heading three</font></h2>

And we're only talking colors and alignment here! We're not even counting borders, margins, and backgrounds (and yes, Netscape tried to implement those in HTML as well). We're also not talking about updating the content with our redesign—you'd have to struggle to read the actual page text amidst all the HTML junk.

Would anyone want to try and update that site?

So how does CSS fix this?

CSS solves all of these problems by linking your document to a separate file called a stylesheet. This stylesheet can then be reused across an infinite number of pages. From this single file, colors can be updated and fonts can be set and updated once, and the changes will affect the entire site.

h2 { text-align: center; font-size: smaller; }
p { color: black; }

.blue { color: blue; }
.green { color: green; }
.right { text-align: right; }

Markup and styling are separated

With CSS, pages become pure content. When you make a new page, you simply write what's unique to that page and then link your stylesheet to it, and it'll be styled just how you like it already.

<h2 class="blue">Heading one</h2>
<p class="right">This is all you need when you have HTML and CSS!</p>

<h2 class="green">Heading two</h2>
<p>Isn't this a lot easier to read and write?</p>

<h2 class="blue">Heading three</h2>

Easier to update existing pages

Remember how hard it was to read the page text through all the markup? With no visual stuff to get in the way, it's far easier to find the paragraph you need to fix or drop in a couple new images without scanning hundreds of lines of markup for where they need to go.

Redesigns are a breeze

And if you want to redo your entire site? Simply start with a new stylesheet and start styling again. You don't have to update a single page if you don't want to!

In this section, I'll walk you through exactly how to write a stylesheet. They're actually much simpler than HTML, simply lists of elements with the visual traits to apply to those elements. We'll also talk about the link element to get your stylesheet attached to your pages.