css 101

Rules and Selectors

To style elements in a document, you simply apply rules to selectors. What's that now? Simple: A "selector" is a way of referring to some specific element or group of elements on a page. For example, if we want to apply a style to all paragraphs, then the <p> (paragraph) tag is our "selector" - it's what we're "selecting" to style. Selectors can either be standard HTML tags, or custom elements you define.

A "rule" is a set of properties that get applied to the selected element or elements. A rule can be as simple as a single line declaring the background color of the element, or a complex grouping of properties that work together to achieve an effect.

Let's start with the simplest case - styling a single paragraph. All you need to do is attach a style to an element on the page, and create rules as name:value pairs, separated by semi-colons. Try this:

Your paragraph should now look different from other paragraphs on the page:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo ...

So now we've gone and done exactly what we said we weren't going to do - embedded stylistic information into the document, thus making it more difficult to maintain/update in the future. Let's fix that by creating a document-level style for the page you're working on. First, remove the style you just attached to that paragraph, restoring it to a normal <p> tag.

Now, go to near the top of your document, somewhere inside the <head> container tag, and add this:

What you've just done is remove the "inline" style added earlier, and replaced it with a document-wide style declaration. <style> is an HTML tag that provides a container into which you can insert any number of style rules that should apply to the entire document. Remember that earlier we said there were three places you can apply styles: 1) To a single element, 2) To an entire document, 3) To an entire site. We've just moved from method #1 to method #2.

With the style added to the entire document, you get the same effect, but for all paragraphs on the page. In this case, the standard HTML <p> tag is your selector. In the <style> section of your document, you've created a rule that corresponds to all instances of that selector. Of course, you probably don't want blue paragraphs all over the place, so go ahead and change it to black. While you're at, add a second name:value pair, specifying the font size. When you're done it should look like this:

What else can you specify besides color, font size, and font family? Lots. Background-color, border width, border color, and much more. But how do you know what name:value pairs are available to you? We'll be showing you the most commonly used CSS properties in this tutorial, but we can't cover every possibility. To go beyond the basics, use any CSS reference, such as a book or web site (see the Related Links section of this tutorial for links). One of the best, and easiest-to-read sources of CSS information is the W3Schools' CSS Reference.

Alternatively, you can use a text editor that will help you with styles. For example, Adobe Dreamweaver has extensive CSS creation tools built in. However, for the sake of this tutorial, we're going to focus on learning CSS, not on finding tools that write it for you. And the best way to learn is to write code by hand. Later, after you've climbed the garden wall, you can push away the ladder if you want to. But you probably won't want to :)