We are still just working with our page colors.
In a plain HTML body tag we use attributes to set our page colors for the background, the text and the links. With CSS we replace those attributes with style declarations.
In Lesson 2, we declared the background-color and (foreground) color for the body element. Now we'll replace the link attributes.
We are still learning new concepts. This lesson is no different. Wouldn't you know that links are a special case? All together now - GROAN!
First, let's look at a plain body tag and review our last lesson.
<body bgcolor="#00000" text="white"
link="#00ffff" vlink="#800000" alink="#ff00ff">We have already replaced bgcolor and text in our stylesheet. My page so far would look like:
<head>
<style type="text/css">
<!--
body { background-color: #000000; color: white;}
-->
</style>
</head>
<body link="#00ffff" vlink="#800000" alink="#ff00ff">
Since I declared my bgcolor and my text color in my stylesheet, those attributes are gone from my body tag.
It would be reasonable to think that the link properties would look like
body {
link: value;
vlink: value; (this code is wrong)
alink: value;
}
However, this is not the case, as we shall see.
In a standard HTML body tag, there are 3 link colors:
Text links are made using the anchor element:
<a href="URL"> Text to click on </a>
So when we talk about link attributes in the body tag, we are really talking about colors for the anchor element.
The anchor element in CSS is a special case called a pseudo-class. We haven't learned about the class attribute yet, so we won't go into detail here. What we need to know now is that anchor tags have this form;
a:type { color: value; property: value; }
(You can apply other styles to anchors in addition to color.)
HTML's link is replaced by a:link in CSS:
a:link { color: #0000ff; }
HTML's vlink is replaced by a:visted in CSS:
a:visited { color: #ff00ff; }
HTML's alink is replaced by a:active in CSS:
a:active { color: #800000; }
CSS has one more type of anchor declaration, hover. It can't be seen on WebTV, so it is optional. This style defines how a link appears when a pc user places their cursor over a link (before clicking on it).
Here is the code for a hover color:
a:hover { color: #ffff00; }
I use hover to make my links bold and large so they stand out a bit.
Here is a screenshot showing my links below
|
|
Now we can add the anchor element declarations to our stylesheet.
<head>
<style type="text/css">
<!--
body { background-color: #000000: color: white;}
a:link { color: #0000ff; }
a:visited { color: #800000; }
a:active { color: #ff00ff; }
-->
</style>
</head>
<body>
We have now replaced all of the body tag attributes.
a:hover must be listed after a:link and a:visted to be effective. a:active must be listed after a:hover to be effective
The latest WebTV "upgrade", version 2.9.1 causes CSS links to fail. Viewers using this upgrade will see default colors instead of the styling that you specify. Oh, no!
This problem can be overcome by adding a second of link rules assigned to a class that may be added to the body tag. Here's how:
1) Make a class in your stylesheet - I'll use the class "links". Use this same class for all of your link rules. This can be done quickly and easily using copy & paste for the rules, then add your class name in front of the second set:
.links a:link { color: #0000ff; }
.links a:visited { color: #800000; }
.links a:active { color: #ff00ff; }
2) Use the class in your page:
<body class="links">
On your sample page, replace the link attributes in your body tag with anchor declarations in your stylesheet. (The active and hover links are optional.) Post your page.
Our next lesson will be on external stylesheets.
Happy coding!
Gnubee
