3.2 Classes

3.2.1 What is a Class?

In many if not all of the attribute lists, you find an entry for classes. Try it; for example for a headline tag (H1 - H6)
The explanation says: "A name used to define a specific type of this element". What does that mean?
Lets assume that you want all your Headlines "H3" in all documents in a certain project always to be in a special font, a special size, a special color, centered, and so on.
You could do that by activating the right attributes for every headline H3 that you use.
Same thing for tables and anything else.
But doing that individually all the time has two disadvantages:
You have to do it all the time - that is obvious and that is work
If you actually did it many times in the context of a large HTML project, and for some reason now want to change it (your headline H3 must have a different color because you boss doesn't like it), you have a lot of extremely boring work ahead of you. That is the really big disadvantage!
So what you do is to specify all the attributes that belong to any chosen tag once and for all in a class sheet. Your class sheet is stored as an individual document somewhere (usually with the ending .css for "cascading style sheet") with a name that you enter in the "class" line of the attribute list of your tag.
With a proper reference to that document in the right place, the browser will now always look up the class sheet and take the attributes from there if it finds an entry in the "class" line. In other words: The class sheet overrules the internal settings of your browser.
The disadvantages given above are now solved: You only have to give the name of the chosen class in the attribute list of any tag (and even that you may avoid, as we will see shortly), and if you want to change anything, you only change it once - in the class sheet!
Class sheets must be stored somewhere. A good idea is to do that in a special file named "styles". They are best written and changed with a really simple editor (e.g. wordpad), because they only contain very basic text. A class sheet may look like this:
 
<!-->
BODY {BACKGROUND: url(../styles/hltf4.jpg) fixed}
H1 {FONT-FAMILY:ARIAL; FONT-SIZE: 20px}
H2 {FONT-FAMILY:ARIAL; FONT-SIZE: 17px}
H3 {FONT-FAMILY:ARIAL; FONT-SIZE: 14px}
H4 {FONT-FAMILY:ARIAL; FONT-SIZE: 14px}
.A1 {COLOR:#000000}
.A2 {COLOR:#337733}
.A3 {COLOR:#3333FF}
.A4 {COLOR:#FF3333} <--/!>
 
It can be written exactly like this with any editor. You recognize several features:
It is contained within a written-out "Insert comment" tag (<!--></--!>). That makes sure that browsers that do not understand class sheets consider this to be a comment; they will then ignore it.
For the first five lines, there are familiar names or abbreviations at the beginning of each sentence; they correspond to the "tags" (like "Body", "H1",...) for which we want to have attributes fixed in the class sheet, followed by the list of desired attributes in { } brackets and separated by semicolons ";". The meaning is clear; you could add more attributes if you like.
You can have a link in an attribute; exactly as if you were doing it with the F6 key attribute editor. But here you must write out the path by first specifying "url" followed by the absolute or relative path as in the second line of the example above.
But there are also unfamiliar symbols at the beginning of each sentence (.A1, .A2,...), again followed by attributes in { } brackets. What do they mean?
Well, we have not yet had to write anything into the "class" line in the attribute list because the attribute specifications in the first five lines were sufficiently defined by the tag name. The A1 and so on are now the arbitrary names we write in the class line of an attribute list as discussed above in general.
Consider the case where you may include several tables with different attributes in your standard documents. As an example, in the Hyperscripts we use, there are the standard tables for formatting the text (you are just looking at one) and the tables for. e.g., exercises.
A class sheet with an entry for the tag "table" would provide the chosen set of attributes for all of your various tables. But HTML gives you the option to give your different kinds of tables (or any tags for that matter) a name, and refer to that name in the class sheets.
"A1" thus is a name that specifies that whatever tag is associated with that name will be in the color 337733. You can chose the name in any way you like; but it must begin with a "." in the class sheet. As before, you could define many more attributes behind the name "A1".
All we need to know now is how we associate a tag with a name. This is done by writing the name(always without the "." into the entry "class" in the attribute list.
We now have established another possibility of some conflict of interest for the browser displaying your document. Take a font, for example. What kind of font somebody looking at your document may really see on his or her screen, may be defined in many, potentially conflicting ways:
By the setting of the browser (which few people bother to change from its preset default values; but the option is there).
By the setting in your class sheet for "body".
By the setting in your class sheet for some tag name, that you may enter as "class" in the attribute list of some specific tag.
By the setting in your class sheet for some name applying to some tags of the same kind that carry the name.
By the attribute setting of a tag that you activated directly, ignoring the existing class sheet and the class definition for that tag.
You could give conflicting attribute values in each case. What is the browser going to do? It will assume a hierarchy that is in the reverse order of the list above! The attributes directly specified have the highest priority, the browser setting the lowest.
 
index.gif zurueck.gif