HTML and CSS Reference
In-Depth Information
I explain how to alter the link colors shortly. One of the main advantages of taking this
approach, aside from the fact that it's how the standard says you should do things, is that
then you can put the style into a linked style sheet and set the background color for your
whole site on one page.
Many layouts require that elements be flush with the edge of the browser. In these cases,
you need to set the margin to
0
for your
<body>
tag. Some browsers enabled you to do
this with proprietary attributes of the
<body>
tag, but they're not reliable. To turn off
margins, just use this rule:
body { margin: 0px; }
You already know how to adjust the colors of elements on a page, but links are a bit dif-
ferent. They're more complicated than other types of elements because they can exist in
multiple states: an unvisited link, a visited link, an active link, and a link that the user
currently has the pointer over. As you can see, there's one more state here than has been
traditionally reflected in the
<body>
tag. Using CSS, you can change the color of a link
when the user mouses over it (referred to as the
hover
state) as opposed to when he's
currently clicking it (the
active
state).
Another advantage of CSS is that you can change the color schemes for links on the
same page, rather than being forced to use one scheme throughout. Finally, you can turn
off link underlining if you want. For example, here's a style sheet that turns off link
underlining for navigation links, renders them in boldface, and keeps the same color for
visited and unvisited links:
a:link { color: blue; }
a:active { color: red; }
a:visited { color: purple; }
a:hover { color: red; }
a.nav { font-weight: bold;
text-decoration: none; }
a.nav:hover, a.nav: active { background-color: yellow;
color: red; }
a.nav:link, a.nav:visited { color: green; }
From the style sheet, you can see that for all
<a>
tags in the class
nav
, the
text-decora-
tion
property is set to
none
, which turns off underlining, and
font-weight
is set to
bold
.
For
<a>
tags on the rest of the page, the underlining remains on, but I've set it up so that
when the mouse is over the links, they turn red. For navigation links, when the mouse is
over the links, the background of the element turns yellow and the text turns red.
