|
|
 |
Step 2 Introduction
Try out CSS while you are learning it with the Online HTML Editor
As you've seen in the previous step, CSS can be used to centralize HTML tag preferences by use of sectors and declarations. However, as you may have noticed, we've come across a problem with declaring CSS sectors. As the scope of our sector knowledge is now, you can only make sectors that are used with all instances of an HTML tag. If you are using the popular tag FONT, this can get a little tricky to distinguish between all the FONT tags on which declarations to give them. That is why the creators of CSS decided to incorporate a popular idea known as classes...
The term "class" is not foreign to the scripting world. Almost every major programming language - including C++, Java, Visual Basic, and even JavaScript - use classes to help with program creation. What what is a class? Put simply, a class is a user-defined syntax. It's a tag that you make up. You set all the default declarations and can create or delete a class at any time. Now, I'm not saying that you can go off and create your own HTML tag (that is for XML), however, you can be pretty darn close.
Your First Class
To start a class, you must do the following steps for the sector, then enter your declarations like we've always done. First, declare the HTML tag you wish to make a class for. Then, either put in a dot (.) for a CLASS or a hash (#) for an ID after the tag, without entering in any spaces. Lastly, put in the name the class. If that confused you, take a look at the below example. It is the Sesame Street scenario from last chapter, except changed around to a class.
<STYLE TYPE="text/css">
H3.BIGBIRD { color : yellow; } /* CLASS
FONT#COOKIEM { color : blue; } /* ID */
</STYLE>
<H3 class="BIGBIRD">Big Bird</H3>
<FONT id="COOKIEM">Cookie Monster</FONT>
Both classes and ids work in pretty much the same way, however ID declarations will not be able to use the structural elements of HTML in the future, so it is encouraged to use classes.
Global Classes
The class and id we delcared above were tag-specific classes. For example, you could not declare the BIGBIRD class on a FONT tag. You can solve this by either combining classes, in which you sector would be called FONT.BIGBIRD, H3.BIGBIRD. That will eventually get tedious and make your code hard to understand. Instead, why don't we make it a global class, which enables any HTML tag to take on the class BIGBIRD. Just take out the HTML tag name so it changes to .BIGBIRD. This is the prefered way of using classes on a site. Thus our new code would be:
<STYLE TYPE="text/css">
.BIGBIRD { color : yellow; }
#COOKIEM { color : blue; }
</STYLE>
<H3 class="BIGBIRD">Big Bird</H3>
<FONT id="COOKIEM">Cookie Monster</FONT>
Big Bird
Cookie Monster
Classes as Contextual Sectors
In the same way that we used contextual sectors with HTML tags, we can also use them with classes. I'll just show you an example style sheet and tell you what each sector does.
<STYLE TYPE="text/css">
FONT .EX1 { color : yellow; }
#ID2 H2 { color : blue; }
#ID3 BIG.EX3 { color : red; }
</STYLE>
Haven't you've already seen the first example? Well, notice the little space in between the HTML tag and the class. This changes the sheet around to state that it will only display the declarations with text that is inside a FONT tag and is also inside another tag that has class="EX1" with it.
For example 2, the declarations shown in this sector will only appear with text that is inside a tag with the id of ID2 and is furthermore also inside an H2 tag. Note, that the tags must appear in that order. If the H2 comes first then a tag is made with an id of ID2, it won't work
The last example is the most specific of them all. The lucky, little text must: be inside a tag with an id of ID3 then also be inside a BIG tag with a class of EX3. Normal websites never get this specific to sectors, however it is nice to have the option to have this exclusivity if the need arises in the future.
This is the end of step 2. In the next part you will learn
How to customize the appearance of your page fonts.
Next Step
CSS in 7 Easy Steps (Home)
© 2000 Nicolas Spiegelberg. All rights reserved
|
|
|
