|
|
 |
Step 6 Introduction
Try out CSS while you are learning it with the Online HTML Editor
Since the dawn of HTML, hyperlinks have been a vital part of the way we navigate through the web. Not surprisingly, the most requested example of CSS code is the configuration of hyperlinks (A tag). However, programmers have known from the start that hyperlinks are complicated and can have various configurations depending upon whether they have already been clicked or not, if they are being clicked, or if the mouse is over a hyperlink. To handle these numerous configurations (or declarations), CSS psuedo-elements were developed. Currently, psuedo-elements are used solely for the hyperlink tag. In this section, we will learn how to effectively use psuedo-element sectors and also discuss inheritance ....
Psuedo-Element Implementation
Psuedo-element can be very confusing without examples, so I'm going to cut to the chase and not bore you with incoherent sentences. Hopefully, you should already know enough about links to know what a visited link, etc. is. The only link option you may not know about is "hover" which displays the according declarations when the user's mouse goes over a link. Here are all the psuedo-elements for the hyperlink tag:
<STYLE TYPE="text/css">
<!--
A { color: red; } /* unvisited link */
A:visited { color: blue; } /* visited link */
A:active { color: green; } /* active link */
A:hover { color: gold; } /* hover or mousover link */
//-->
</STYLE>
The example above configures every link on the page to be a certain color depending upon the stage of the link. You are not limited to color, however. You can use any declaration you would like on hyperlinks. The most popular are: color, background-color, text-decoration, and font-family.
Psuedo-Element Classes
Another superior quality of CSS is the ability to have different declarations for each hyperlink on the page. Take this site, for instance. The yellow text for links on the left hand side of this page looks cool against a blue background but would be really hard to see against the white background that this text is on. To solve this, I made a psuedo-element class for links on this side of the screen. To make a psuedo-element class, just replace the A in the above source code with a proper class or ID name like this:
<STYLE TYPE="text/css">
.SIDECLASS { color: darkred; font-size:14pt; } /* unvisited link */
.SIDECLASS:visited { color: indianred; } /* visited link */
.SIDECLASS:active { color: gold; } /* active link */
.SIDECLASS:hover { color: darkgreen; } /* hover or mousover link */
</STYLE>
<a href="index.shtml" class="SIDECLASS">A psuedo-element class link</a>
A psuedo-element class link
Inheratance
Another important advantage that we have not stated yet is inheritance. Inheritance is clearly shown through the example listed above. SIDECLASS had a font size of 14, thus every other psuedo-element of SIDECLASS has a font size of 14 unless otherwise declared. The same thing can happen with other tags and sectors. Consider the following lines of CSS:
<STYLE TYPE="text/css">
.YBACK { background-color: rgb(255,255,150); }
#RTEXT { color: darkred; }
</STYLE>
<font class="YBACK">Check out the <b id=RTEXT>Red Text</b></font>
Check out the Red Text
Now, I never stated that the RTEXT id tag should have a yellow backing, however that declaration was inherited to the id because the YBACK class had not yet been closed by the /FONT tag. Knowing this, we can use inheritance to effectively shorten the amount of delcarations we need to state in each sector.
This is the end of step 6. In the next part you will learn
How to customize the tables, forms, and lists on your page.
Next Step
CSS in 7 Easy Steps (Home)
© 2000 Nicolas Spiegelberg. All rights reserved
|
|
|
