Calle's Really Basic CSS Tutorial

Why?

This tutorial is aimed at the kind of people who insist on using <FONT> tags because they think that using stylesheets is too hard. Hopefully, it'll make them see the error of their ways.

What?

This text assumes that you have a web page with plain basic HTML on it, that you can edit it and that you can place another file alongside it and have it correctly served by the webserver. It also assumes basic knowledge of whatever editing tool you prefer, and familiarity with HTML. If you don't have those things, go get them or find a more basic tutorial.

Linking in the stylesheet

Having the stylesheet in a file of its own is the most convenient way in the long run, although it certainly isn't the only way. In order to link a separate stylesheet to your webpage, put this in the <HEAD> section:

<link rel="stylesheet" title="Tutorial" type="text/css" href="tutorial.css">

Then bring up the tutorial.css file in your editor and prepare to reload the page itself a lot.

The True and Utter Basics

A stylesheet consists of a bunch of sections like this:

selector {
    style-element: value;
    another-element: anothervalue;
}

The selector bit says which elements the information applies to, and the style information specifies the style. The bit that can get a little tricky is the selector, since it's very flexible. But let's start at the beginning. The simplest type selector, and the one that all of the others build on, is simply the tag name. Imagine that in your document you've wrapped all your <H2> elements in <FONT> tags to make them bright green. To do that in CSS instead, we put this in the stylesheet:

h2 {
    color: green;
}

Not that hard, was it?

Digression

Now that we've seen an example of the most basic kind of stylesheet (because the snippet above is a complete and usable stylesheet all by itself), let's digress a little and talk about other ways to include style info. The first one is to put the entire sheet in a <STYLE> tag in the header section of your page. In my opinion, that variant combines the disadvantages of inlining style information (you must edit the page to change its appearance) with the disadvantages of a separate stylesheet (it can be tricky to select just the right elements to apply the style to) without giving any advantages at all. So let's disregard that one. The other way, and the one that is occasionally useful in a "quick hack" sort of way, is to put style information directly into the tag by way of a style attribute. Let's say that after you've turned all your <H2> elements green, you want one of them to be yellow. Since we haven't yet mentioned the more advanced ways to select, we put the style info into the tag:

<h2 style="color: yellow">

You can put exactly the same things in a style attribute as you can in a paragraph in a style sheet. And now that we've said that, we won't touch on where to put style info again, since you now know that if you suddenly want to put a paragraph in a sodding huge font, you can do <p style="font-size: 4711%"> rather than play around with those <FONT> things

Some basic style elements

All of the things you can specify in a style are listed in the specification. But, some of them are pretty esoteric, so I'm going to give you a few of the more commonly useful ones right here and now:

color: Specifies text color. Can be given as a name, which may or may not be recognised by the user's browser, or more securely as an rgb triplet. rgb(255,255,0) is bright yellow, for example.
background-color: Specifies the color of the background.
font-size: The size of the font. If you're a nice person, you'll specify this one as a percentage.
font-weight: Can be specified either as a number from 100 to 900, or as one of the strings normal, bold, bolder or lighter.
text-decoration: Can be either the string none or one or more of the strings underline, overline, line-through and blink.
font-family: Specifies the font to use. Should be given as a list of strings, with the most wanted first and "fallback" fonts to use if the first one(s) can't be found listed later.
font-style: One of the strings normal, oblique and italic.
background-image: Specify a background image, like this: url("http://example.com/image/background.png")

Selectors!

And now for the fun part: the selectors!

It's not that often that you want to change the appearance of all instances of an element. More commonly, you want the ones that are in certain environments to look a certain way. Say, for example, that you want the content of all <EM> elements that live inside definition lists to be underlined rather than italic. We can do that this way:

dl em {
    font-style: normal;
    text-decoration: underline;
}

By stacking the tag names like that we specify <EM> elements that are children of <DL> elements. There may be any number of other elements in between them, that doesn't matter. In this case, there almost certainly will be a <DT> or <DD> between the <DL> and the <EM>, but the <EM> will still be selected.

We can also select those elements that are direct children of another element. Say, for example, that we want all <P> sections that are direct children of <H1> elements to appear in a larger font, but not those <P> elements that are children of <H2> elements. This is how we write that:

h1 > p {
    font-size: 125%;
}

There are more structural selectors like this. You can select those elements that come directly after other elements. Look them up in the specification.

Classes and IDs

Of course, you can't always select the elements you want by structural means. Sometimes you want to change appearances depending on what an elements is in your text rather than where in the text it is. In order to do that, you do have to change your HTML a bit. If, for example, some paragraphs in your document are warnings that the reader really should note, and you want them displayed in red. In order to do that, you add a class attribute to the opening tag, like so: <p class="warning">. Then, in your stylesheet, you write this:

p.warning {
    color: red;
}

And then all such paragraphs will be shown in bright red. You can, if you so wish, make the stylesheet more general:

.warning {
    color: red;
}

Now any element with a class="warning" attribute will be displayed in bright red. Note the separation of content and presentation here, by the way. Via the class attribute you say what an element is, and in the stylesheet you specify how to display it. Don't say class="dimgreytext". Say class="conspiratorial". Some day you will want to change the appearance, and if that then means that all things marked up as dimgreytext are shown in underlined green, someone will get confused and it'll probably be yourself.

Another way to mark things in the HTML and select them in the stylesheet is via id attributes. Such attributes give a unique identity to an element. No other element in the document can have the same id. Most often this is used to mark design elements on the page: <div id="sidebar">. You select that element in the stylesheet by prepending the id with a hash sign:

#sidebar {
    border: thin black solid;
    float: left;
}

Combining it all

id attributes aren't that useful to select themselves, mostly. Where they do become useful is when you combine them with other selectors. For example, maybe you want all links in that sidebar to be presented without underlines:

#navbar a {
    text-decoration: none;
}

And that way you can be sure that only the <A> elements in the sidebar lose their underlines. All kinds of selectors can be combined this way. You can easily select <P> elements that follow a <PRE> element of class "sourcecode" inside the huge table called "main" and turn the text in those paragraphs into UPPERCASE:

#main pre.sourcecode + p {
    text-transform: uppercase;
}

One Last Thing

There is one more thing you need to entirely replace your old hardcoded presentation information. You need to be able to specify different appearances of <A> links depending on if they've been visited or not. That's done by something called pseudo-classes. It's not as hard as it sounds:

a {
    color: blue;
}

a:visited {
    color: green;
}

a:hover {
    color: red;
}

So. Now all your links will be presented in blue if they're not visited, green if they have been visited and red while the user has the mouse pointer hovering over it while deciding whether to click or not. CSS1 have only these pseudo-classes, and they only work on links. CSS2 have several more, and extends their use to most any element at all. Unfortunately, Mozilla is just about the only browser that supports CSS2 in any real way.

The Stylesheet for this page

In closing, an entirely real example of a stylesheet: the one that makes this page look like it does. It's the default stylesheet for all of cyberPoMo, so it's not short. It's also rather more grown than designed, so it's not exactly pretty or optimal. But, it's an actual real-life example and you can easily see the end result (indeed, you've been looking at the result for a while now). If you're using a browser that lets you select stylesheets, you can look at what it'd look like without the styles. In Mozilla, you do that in the View menu, by selecting Use Style and then Basic Page Style. The difference is not small.

@import url("/css/navbar.css");
@import url("/css/fiction.css");
@import url("/css/fanficindex.css");

body {
  background: #8b7500;
  margin-left: 160px;
  font-size: 100%;		/* This makes a difference to MSIE! */
}

a.footer 
{
  font-size: 75%;
  float: right;
  margin: 0.75em;
  padding: 0.25em;
  text-decoration: none;
  clear: both;
}

/* Default looks */

.main h1, .main h2, .main h3, .main h4, .main h5, .main h6 { 
  font-weight: bolder;
  text-align: center;
  vertical-align: middle;
  width: 640px;
  color: #6b4914;
}

.main h1 {
  font-size: 25px;
  height: 25px;
  padding: 10px 0px 10px 0px;
  background: url("/images/gold_h1_bg.png") no-repeat top left;
}

.main h1:first-child, .main h2:first-child { 
  margin-top: 0;
}

.main h2 {
  font-size: 20px;
  height: 20px;
  padding: 10px 0px 10px 0px;
  background: url("/images/gold_h2_bg.png") no-repeat top left;
}

.main h3 {
  font-size: 15px;
  height: 15px;
  padding: 10px 0px 10px 0px;
  background: url("/images/gold_h3_bg.png") no-repeat center;
}

.main ul, .main table, .main ol { 
  padding-top: 10px;
  padding-bottom: 10px;
}

.main dt, .main dd { 
  padding-right: 15px;
  padding-left: 15px;
}

.main form { 
  text-align: center;
}

.main form h2 { 
  background: none;
}

.main img { 
  border: none;
}

.main a { 
  text-decoration: none;
  color: black;
}

.main a:visited { 
  color: #6b4914;
}

.main a:hover { 
  text-decoration: underline;
  color: #ffd700;
}

/* Used in a few places to credit other people for their ideas */

p.credits {
    font-size: 80%;
    text-align: right;
}

/* Make definition lists less ugly */

.main dl {
  margin: 0;
  padding: 0;
  width: 600px;
}

.main dt {
  font-weight: bolder;
  padding-left: 20px;
}

.main dd {
  padding-left: 20px;
  padding-bottom: 10px;
}

/* For LJ userinfo lookalike */

.ljuser { 
  white-space: nowrap;
}

.ljuser a { 
  text-decoration: none;
  color: blue;
}

.ljuser img { 
  border: none;
  vertical-align: bottom;
  padding: 0;
  margin: 0;
}

/* From fanfic.css */

.main .text, .main ul, .main table, .main dl {
  width: 640px;
  background: url("/images/gold_index_bg.jpg");
}

.main p, .main pre { 
  padding: 0px 15px 0px 15px;
  margin: 0;
}

.main .text p { 
  padding-bottom: 10px;
}

.main .top { 
  background: url("/images/gold_index_top.jpg") no-repeat top;
  padding: 0;
  margin: 0;
  width: 640px;
}

.main .bottom { 
  background: url("/images/gold_index_bot.jpg") no-repeat bottom;
  padding: 0;
  margin: 0;
  width: 640px;
  margin-bottom: 15px;
}

.main ul {
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
}

.main ol {
    list-style-type: arabic;
    text-align: center;
    margin: 0;
    padding: 0;
}

.main ol li { 
  display: list-item;
  text-align: left;
  margin-left: 4em;
  margin-right: 2em;
}

.main li {
    display: block;
    margin: 0;
    padding: 0;
    padding-bottom: 1ex;
}

tr.notontrip { 
  color: rgb(255,128,0);
}

.main a:hover {
    text-decoration: underline;
}

.main table td {
    text-align: center;
}

.main table { 
  text-align: center;
}

.main table a { 
  text-decoration: none;
  color: black;

}

.main table a:hover { 
  text-decoration: underline;
}

.main table a:visited { 
  color: #6b4914;
}