As discussed in Inheritance, most HTML tags have pre-defined attributes. You know how to universally redefine those tags using element selectors and how to redefine specific incidences of them using class selectors. But what if you want to start from scratch? This is where the class and ID selectors really come in handy. You can't actually create your own tags with CSS, but using the and tags, you can get pretty close.

The Div Tag has only one predefined property. It includes a line break after the "div". This makes it easy to create paragraph-like divisions with whatever other properties you choose. For example, here's a piece of code from an AW page:


You'll find it at the top of the group members box on the left of any group page. Forget about the class right now and notice that the first line is enclosed in a tag. In the group members list, this sentence appears on a line by itself, and yet there is no tag to break the line. The tag did that.

The Span Tag on the other hand has no pre-existing properties. It's a blank slate that lets you apply whatever you need. Notice the second line in the above example. Only the number is enclosed in the tag. The word "Members" follows immediately after, but on the group page they're on the same line. That's because there is no pre-defined line break in the tag.

That's the only difference between the and tags. Otherwise, they're wide open to whatever rules you want to give them.

Applying Rules to Div and Span. Notice that both tags in our example have a class. Class selectors and ID selectors are the most common way of giving these tags rules. We've already discussed class selectors in 09-Classes. ID selectors work basically in the same way. The major difference between them is that ID selectors are intended to be used only once on a page. They're useful when you begin positioning elements. And since they make more sense in conjunction with positioning, we'll wait to cover them then.