| Home Web | Top Bottom | Contents Prev Next |
class, style and id
Classes
IDs
Style
The <span> Tag
Example
We've seen how you can use selectors in CSS code to apply formatting to particular HTML tags. For example, the p selector applies formatting to <p> tags. But what if you want some paragraphs displayed differently from others? The class, style and id attributes provide this capability. Almost every HTML tag accepts these attributes.
You can create a class by using a selector with the format .name, where name is any name you choose. You can then refer to the class using a class attribute in an HTML tag.
Note: Be sure that your name begins with an alphabetic character. You can use alphabetic characters and digits in the remainder of the name. Some browsers will accept names that begin with digits or that contain certain special characters, but you're safest if you stick to alphabetics and digits with the first character alphabetic.
Some browsers may have some "reserved words" that cannot be used as names. If one of your styles refuses to display even though everything seems to be in order, try changing the name just in case you're running up against this.
The CSS specs now let you specify more than one class: class="class1,class2", for example. However, most browsers don't support this and won't apply either class if you try to do this. At least for now, restrict yourself to specifying a single class.
...
<style type="text/css"> <!--
p { color: blue; }
.red { color: red; }
--> </style>
</head>
<body>
<p>
This paragraph is displayed in blue.
</p>
<p class="red">
This paragraph is displayed in red.
</p>
...
It's not a good idea to name your classes things like "red" like I've done here. You might decide the page looks better with these elements in green rather than red. It will look silly to have .red { color: green; }, but it would take a lot of effort to find all of the class="red" attributes and change them to class="green". Give some thought to your names, and try to use names that identify what is being styled rather than how it is being styled. A name such as "highlight" might be better than "red", for example.
The "red" class in this example can be referenced by any HTML tag — you could include class="red" in a <p> tag, a <b> tag, or any other tag. If you intend the class to be used in only one type of tag, you can limit it to those tags: use a selector such as p.highlight to create a "highlight" class that can only be referred to in <p> tags.
IDs are very similar to classes. You define the selector with the format #name, where name is any name you choose. You can then refer to the id using an id attribute in an HTML tag. The difference is that only one HTML tag can specify a particular ID.
It's almost always better to use a class than an ID: you keep the flexibility of being able to apply the selector to more than one HTML tag. You might choose to use an ID rather than a class when you use formatting that you're sure will only apply to only one element, such as when you specify an absolute position on the page for an element. You (usually) wouldn't want to place two elements at the same location.
...
<style type="text/css"> <!--
p { color: blue; }
#red { color: red; }
--> </style>
</head>
<body>
<p>
This paragraph is displayed in blue.
</p>
<p id="red">
This paragraph is displayed in red.
</p>
<p id="red">
This is not correct!!!!
Only one tag can specify id="red"!
</p>
...
The style attribute lets you specify style information right in the HTML tag. You can specify one or more property-value pairs. You do not include a selector or the curly braces.
...
<style type="text/css"> <!--
p { color: blue; }
--> </style>
</head>
<body>
<p>
This paragraph is displayed in blue.
</p>
<p style="color: red; text-align: right;">
This paragraph is displayed right-aligned in red.
</p>
...
You may have wondered about the type="text/css" attribute in the <style> tag. That's there to inform the browser that the CSS style language is being used. There are other style languages such as XSL and JavaScript style sheets, so it's important that the browser be able to determine which type is being used.
If you use any style attributes in your document, you should include the following tag in the head section to inform the browser that the style attributes contain CSS code:
HTML: <meta http-equiv="content-style-type" content="text/css"> XHTML: <meta http-equiv="content-style-type" content="text/css" /> I've had problems in Netscape 4 using the XHTML format in HTML code, so it's best to stick with the HTML format in HTML code.
|
Now that you know about the style attribute, I suggest that you forget about it. It makes a lot more sense to define a class whenever you want to style something. That keeps all your style information in one place, and also makes it a lot easier if you decide to apply the same rule to another tag. It appears that the style attribute may be removed from the CSS standard eventually. It goes against the grain of separating formatting from structure since it embeds formatting information into the HTML code. |
You've seen how you can use an inline tag such as <i> or <b> to change the characteristics of text within a block element. Suppose you want to change the color of just a few words within a paragraph. The <span> tag is an inline tag that doesn't specify any particular formatting of its own. Add class, id or style attributes to define the formatting you want.
...
<style type="text/css"> <!--
p { color: blue; }
.red { color: red; }
--> </style>
</head>
<body>
<p>
Most of this paragraph is blue, but <span class="red">this
portion is red.</span>
</p>
...
Here's your chance to experiment with the features described on this page. Try defining some classes of your own and putting them to use. You might like to try out id and style as well.
| Home Web | Top Bottom | Contents Prev Next |