The class attribute is very cool. It allows us to make up a style, give it name, then apply it to an element. This takes 2 steps.
First, make a class in your stylesheet. This has the form:
.whatever { property:value; property:value }
Notice the dot (period), then whatever name you decide to give the class.
Second, use the class in an element in your page content, like so:
<tag class="whatever">blah blah blah </tag>
At first glance, this looks like a lot of work, but, I only have to make the class once, then I can use it anywhere many times. Hmmm, you're not convinced? Well, let's see it in action.
Let's say I really like large, bold, light blue text (see the last lesson). Not only that, but I also want to be to apply this style quickly and easily anywhere on a page.
First, I make my class, which I will call lbblue (for "large bold blue"). I put this class in my stylesheet:
/* my large bold, light blue text */
.lbblue {
font-size:24pt;
font-weight:bold;
color:#6699ff;
}
Second, I use this class in an element on my page:
<p class="lbblue">
I really like large, bold, light blue text.
</p>
This will look like:
I really like large, bold, light blue text.
This class can be used anywhere. You are not limited to paragraphs. It can be use in a div or a table just as easily. With external stylesheets, we can apply a class anywhere on an entire website. That's power!
The id attribute works like the class attribute, except that it can only be used once on a page. So why use an id instead of a class? Because it is required for positioning elements with DHTML.
ID form: #name { property: value; }
Notice that id uses a number (or pound) sign (#) instead of the dot that class uses. Other than that, it is the same as class.
To use an id in your page, put it in an element
Example: <div id="name">
Make up a class, declare it on your stylesheet and use it with the class attribute in your sample page. Post your page
The next lesson will discuss the span element - WooHoo.
Happy coding!
Gnubee
