• Choose a category
• All
• Classic-Fiction

By Root 1625 0

two classes. The red class makes the paragraph red (well, white text with a red background), and the script class applies a cursive font to the element.

The first two paragraphs each have a class, and the classes act as you’d expect. The interesting part is the third paragraph because it has two classes.

This assigns both the red and script classes to the paragraph. Both styles will be applied to the element in the order they are written. Note that both class names occur inside quotes and no commas are needed (or allowed). You can apply more than two classes to an element if you wish. If the classes have conflicting rules (say one makes the element green and the next makes it blue), the latest class in the list will overwrite earlier values.

An element can also have an ID. The ID style, the element style, and all the class styles are taken into account when the browser tries to display the object.

Normally, I don’t like to use colors or other specific formatting instructions as class names. Usually, it’s best to name classes based on their meaning (like mainColorScheme). You might decide that green is better than red, so you either have to change the class name or you have to have a red class that colored things green. That’d be weird.

Introducing div and span

So far, I’ve applied CSS styles primarily to paragraphs (with the

tag), but you can really use any element you want. In fact, you may want to invent your own elements. Perhaps you want a particular style, but it’s not quite a paragraph. Maybe you want a particular style inside a paragraph. XHTML has two very useful elements that are designed as generic elements. They don’t have any predefined meaning, so they’re ideal candidates for modification with the id and class attributes.

♦ div: A block-level element (like the p element). It acts just like a paragraph. A div usually has carriage returns before and after it. Generally, you use div to group a series of paragraphs.

♦ span: An inline element. It doesn’t usually cause carriage returns because it’s meant to be embedded into some other block-level element (usually a paragraph or a div). Usually, a span is used to add some type of special formatting.

Organizing the page by meaning

To see why div and span are useful, take a look at Figure 3-6.

Figure 3-6: This page has names and phone numbers.

The formatting of the page isn’t complete (read about positioning CSS in Book III), but some formatting is in place. Each name and phone number pair is clearly a group of things. Names and phone numbers are formatted differently. The interesting thing about this page is the code:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

What’s exciting about this code is its clarity. When you look at the XHTML, it’s very clear what type of data you’re talking about because the structure describes the data. Each div represents a contact. A contact has a name and a phone number.

The XHTML doesn’t specify how the data displays, just what it means.

Why not make a table?

This is where experienced HTML 4 people shake their heads in disbelief. This page seems like a table, so why not make it one? What matters here isn’t that the information is in a table, but that