|
|
Tags vs. Classes
We’ve left an important distinction out to this point. When creating styles, you have three options. These will be clearer when you look at the final page on using Dreamweaver. For now, these are the choices:
Redefine an existing tag.
This can be anything from the standard h1, h2, h6 to <body>, <div>
(useful for applying formatting to a section of a page), <td> etc.
An example would be
h2{font-family:Arial, sans-serif; font-color:#00ff00; font-size:18px;
text-align:center; line-height:24px; background-color:#ffcccc}.
It should look like this:
New h2 tag
with another line
More
often you'll probably want to create a subcategory or class
for a style, or even a category that can be applied to any tag (also called
elements). These would take the form:
.notes{font-family:Verdana,Arial,sans-serif;font-size:10pt; font-style:oblique; background-color:#ffcc00
as shown here:
Use of the .notes class
You could attach this class to any other tag, e.g. p.notes or h1.notes and you could have other classes attached to any of these tags, e.g. P.bodytext.
The .notes class is then added as an attribute of the tag: <p class="notes">.
Pseudoclasses, or dynamic text links:
The third option is really a special case. CSS calls it a pseudoclass because it acts like a sub-category or class of a specific tag. The one that matters is the a (anchor tag) pseudoclass that takes the following form:
a:link { font-size: 12px; font-weight: bold; color: #CC9933; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif}
a:visited { font-size: 12px; text-decoration: none; background-color: #99FFFF; font-family: Verdana, Arial, Helvetica, sans-serif}
a:hover { font-size: 14px; font-weight: bolder; color:
#009999; text-decoration: underline; background-color: #99FFFF; font-family:
Verdana, Arial, Helvetica, sans-serif}
a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
12px; font-weight: bold; color: #6600CC; text-decoration: underline}
This is, in fact the set of pseudoclasses in the external style file for this site. You can see it on these links below (although it's likely that Netscape will not display these properly). And then maybe it's time to check the final Dreamweaver page:
Intro | Types | How-to | Tags | Dreamweaver
