CSS: It's All in the Presentation

Cascading Style Sheets (or CSS for short) is a language used to describe how your page should look. Generally, you put CSS in separate files from your (X)HTML, though you can also put it in the <head> element. The advantage of having your CSS in a separate file is that all of your pages can use that file to effortlessly look the same (even if you make changes to it). You can also attach multiple CSS files to one webpage (for example, a general file that is shared by all your pages, and a file that applies only to that one page.)

CSS files are basically just long lists of rules. For each rule you first specify what it applies to, and then what the rule does. Let's look at a few examples:

body {
background: red;
font-size: 12pt;
}

This rule says: take the <body> tag, and make the background red (in other words, make the page background red). Also, make all of the text contained in the tag 12 point.

p {
color: #00cc00;        /* #00cc00 is a shade of green */
font-weight: bold;
}

This rule says to make the text of every paragraph green and bold. You've probably figured out the general structure of these rules at this point. A few things to pay attention to: make sure you include the curly brackets, the colons and the semicolons at the end of each line. Also, when specifying units (like 12pt in the example above) make sure not to put a space between the number and its units. 12pt is not the same thing as 12 pt. Also, to add comments to your CSS, use this syntax: /* this is a comment */

Selectors

Let's look at a few different ways to select what it is you're applying a CSS rule to. We've covered basic HTML tags already. You can finally change the way your <h1> tags look now, and make them less jumbo (something like h1{font-size:16pt;} note that most of the spaces and line breaks are optional in CSS).

What if you wanted to change the way that links inside of lists looked, but not change the rest of the links on your page? Well, you would be in luck, because CSS lets you do just that:

li a {
color: red;
text-decoration: none;    /* get rid of the underline */
}

li a:hover {
text-decoration: underline; /* bring back the underline */
}

The above example shows how to make links without underlines, and how to make links that change when you hover your mouse above them. You can be as specific as you want with your selectors, for example:

html body div ul li a span {
...
}

This is a valid rule that will apply only to <span> tags that are inside of <a> tags inside elements of unordered lists that are in a <div> in the body of an (x)html document.

Remember classes and IDs from the previous section of this tutorial? If you want to change the way that book titles are displayed, you could create a booktitle class, and write <span class="booktitle">Snow Crash</span>. To specify how that actually looks, you could write a CSS rule:

.booktitle {
font-style: italic;
}

Any element with class="booktitle" will now have italic text. For example, you could apply it to an <li> element if you had a book title in a list. If you wanted to make book titles that were part of a list look different, you would write li.booktitle{...} in your CSS. Class names always start with a period.

IDs work the same way, but use a pound sign instead of a period. So if you had a <div id="header"> you could apply a style to it with #header{...} or div#header{...}

Some important things about CSS rules are that more specific rules override more general rules when they conflict (otherwise, the two rules are combined), and rules that come later override earlier rules. For example:

/* CSS */
a {
font-weight: bold;
color: red;
text-decoration: none;
}

li a {
color: white;
background: black;
}

li a {
background: blue;
}

<!-- HTML -->
<p>I like <a href="http://www.google.com">Google</a></p>
<ul><li><a href="http://www.amazon.com/">Amazon</a> has books.</li></ul>

The above CSS and HTML would produce the following:

I like Google

Both links are bold and neither one is underlined. But the color and background are different.

Layout & Page Design with CSS

If you look at the header of this page you will see a CSS trick in action. There is an h1 tag that says "Using Web Standards", but it has been hidden and replaced with an image. This way the structure of the page is preserved, but new effects can be achieved (the text that you see has a checkerboard pattern, for example.) This is achieved by adding a background image to the header div:

<!-- HTML -->
<div id="header">
<h1>Using Web Standards</h1>
</div>

/* CSS */
#header {
background: url(images/header.gif);
width: 667px;
height: 100px;
border: 1px dotted #FB5C11;
}
#header h1 {
display: none;
}

With this CSS, we specify the width and height of the div to be the size of the background image. We also specify a 1-pixel dotted orange border.

In general, divs can either have a size set explicitly in CSS or can size themselves to fit their content. Similarly, divs can either be positioned explicitly or can just flow naturally like paragraphs.

The CSS property to specify how something's position is determined is, you guessed it, "position". If you set position:absolute; then you need to also specify top: and left: and the object is positioned relative to the top left corner of the page (and it can overlap other objects).

position:fixed; works the same way as position:absolute; except that it stays fixed when you scroll down the page. Unfortunately, Internet Explorer does not support position:fixed; as of the current version.

Another way to position an object is by specifying float:left; or float:right; which causes the object to go off to one side and let text wrap around it. It works the same way that align="left" or align="right" worked for <img> and <table> tags in classic HTML. Here is an example:

this div is
floated left

Here is some regular body text. Notice how it wraps around the floated div naturally. Also the floated div has a red background so you can see where it is better. This is a good way to figure out where your divs are, and you can always remove the background color later.

this div is
floated left
with a margin

That div was felt a little bit too cramped. To add a margin around it, use the margin: property. If you set one value, the object will have a uniform margin. To set different margins for different sides, type up to four values with spaces between them. The first value corresponds to the top margin, then right, then bottom, then left. Or you can just use margin-top:, margin-left:, etc. You can do cool stuff with negative margins too. For example, if that div had a negative left margin, it would float somewhere over in the white space to the left. of this text.

this div is
floated left
with padding

If you wanted to add some space around the text in the red div, but wanted it to be an internal margin, you could set the padding: of the div. Padding works the same as margin, but is on the inside. Again, you can specify up to four values, or you can use padding-top:, padding-right:, etc.

Units

There are various different units that you can use to specify sizes. Some of the most useful are units (and their CSS abbreviations):

You can also use things like inches (in) and centimeters (cm).

>>> Continue to accessibility >>>