My first tutorial, please tell me if I screw anything up, and of course feel free to add your own hints and tips.
Basically what you do when you use a class is tell the browser "OK, I want to have this thing, look like this."
The real versatility in the classes is not the supreme custimization you have, that is inherent in style sheets already. Instead it's that you can the same elemnts, say BOLD, but each indivigual one, or groups of them, each have specific rules for them.
Classes are used in the following manner to appy to text:
<span class="CLASSNAME">{TEXT}</span>
<div class="CLASSNAME">{TEXT}</div>
Class are used in the same way to apply to other elements:
<table class="CLASSNAME">
<td class="CLASSNAME">
<b class="CLASSNAME">{TEXT}[/b]
Every single tag can have the class attribute.
Classes are defined in the style sheet. Let us view this embedded style sheet:
<html>
<head>
<title>{TITLE}</title>
<STYLE TYPE="text/css" MEDIA=screen>
<!--
.CLASSNAME { ATTRIBUTES }
-->
</STYLE>
</head>
<body>
{BODY}
</body>
</html>
Where you see attributes, you would place the attributes of that specific class. For further example showing those attributes:
<html>
<head>
<title>{TITLE}</title>
<STYLE TYPE="text/css" MEDIA=screen>
<!--
.CLASSNAME { background: url(foo.gif) red; color: black }
-->
</STYLE>
</head>
<body>
{BODY}
</body>
</html>
These attributes would set the background to the color red, and in front of the red would be the image foo.gif, which may or may not be partially transparent (because it's a .gif). The color of any text would be black.
Please note that all the different attributes have a semicolon (;) between them, except for the last one
Above I said "Every single tag can have the class attribute." I did not lie, any tag can have class="CLASSNAME" in it. However, not every class (the class being a specific CLASSNAME) can be applied to every single tag.
For instance you could apply a class that makes font red to say, an image. It wouldn't be improper HTML syntax, but it wouldn't do anything. Additionally, there areother certain restrictions, that you yourself can impose. Let's look at the following example:
<html>
<head>
<title>{TITLE}</title>
<STYLE TYPE="text/css" MEDIA=screen>
<!--
P.CLASSNAME { background: url(foo.gif) red; color: black; border-color: #333333 }
-->
</STYLE>
</head>
<body>
{BODY}
</body>
</html>
This gives us a look look at CLASSNAME. The previous CLASSNAME's were declared with a single period in front. This has a P and a single period. The P is the
tag. Any tag may be used following the same manner: BR for
, TABLE for <table>, and so on.
What putting the P in front does is say that CLASSNAME can only be used for the
element. Putting <table class="CLASSNAME"> may be valid syntax, but would be incorrent usage.
Now the older brother to class is id. It's used the same way as class with a few Syntax exceptions. The following example should outline those exceptions:
<html>
<head>
<title>{TITLE}</title>
<STYLE TYPE="text/css" MEDIA=screen>
<!--
.CLASSNAME { background: url(foo.gif) red; color: black; border-color: #333333 }
#IDNAME { background: url(foo.gif) red; color: black; border-color: #333333 }
-->
</STYLE>
</head>
<body>
<span class="CLASSNAME">{TEXT}</span>
<span id=IDNAME>{TEXT}</span>
</body>
</html>
Note the diefferent declaration, as well as the differnt using of the attribute.
If any of this was unclear to you, feel free to ask questions, that's what is here for after all!
