Forum Moderators: not2easy
HTML & CSS are below.
HTML:
<html>
<head>
<title>Link Test 1</title>
<link rel="stylesheet" type="text/css" href="link1css.css"/>
<head>
<body>
<div id="container">
<p>Some text that will include a <a href="http://www.google.com">link</a> which will be
stylized using basic CSS techniques.
</p>
</div><!--container-->
<div id="button1">
<a href="http://www.google.com">Link</a>
</div><!--button1-->
</body>
</head>
CSS:
#container{
margin: 30px 0 0 0;
border: 1px solid black;
}
#container p{
text-align: center;
padding-bottom: 5px;
}
#container a:link, a:visited{
text-decoration: none;
color: yellow;
}
#container a:hover, a:active{
background: url(images/red_dot.jpg) repeat-x left bottom;
}
#button1 a {
text-align: center;
display: block;
padding: 0 2em;
background-color: green;
color: white;
width: 40px;
line-height: 1.4;
text-decoration: none;
border: 1px solid black;
}
#button1 a:visited {
background-color: orange;
}
#button1 a:hover {
background-color: blue;
}
Can anyone explain please?
Erdy.
#container a:link, a:visited {
text-decoration: none;
color: yellow;
}#container a:hover, a:active{
background: url(images/red_dot.jpg) repeat-x left bottom;
}
see those rules in red, they are not specific, they are general. Although they are beside a rule that is specific, any a:visited and a:hover, regardless of what div they're in will have these properties, it should perhaps look more like this
#container a:hover, #container a:active
but then you have
#button1 a:visited {
background-color: orange;
}
with that rule you are getting more specific (both by specifying a container div and a specific portion of the background property) but you are only applying a background color to an a:visited rule you are not yet overriding the background image you specified earlier on all a:visited rules so both are applying but you possibly can't see the color if the previously defined image is not transparent.
specificity overrules the cascade in CSS!
