Adding custom links to CSS? 1

[danielh68]

Hi,

I created a box (19x26ppi) with CSS to hold a link. I have the codes for my box:
------------------------------------------
.leftmenu {
padding: 5px;
height: 19px;
width: 144px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
}
.leftmenu {
height: 19px;
width: 144px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
background-color: #CCCCCC;

}
------------------------------------------

However, I wish to link properties to this box. I tried adding this:
------------------------------------------

.leftmenu {
a:link {color: #6699CC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: normal; text-decoration: none}
a:hover {color: #CCCCCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: normal;text-decoration: none}
}
------------------------------------------

But it didn't work. Can someone explain to me how to accomplish this?

Thanks in advance for your expertise.

Dan

 

[ChrisHunt]

You should rewrite your rules to be like this:

.leftmenu a:link {color: #6699CC; font-family:  Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: normal; text-decoration: none}
 
.leftmenu a:hover {color: #CCCCCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: normal;text-decoration: none}

Though you can do it more economically by remembering that pseudo-classes (like :hover) inherit properties from more general rules, like this:

.leftmenu a {
   color: #6699CC;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 9px;
   font-weight: normal;
   text-decoration: none;
}
 
.leftmenu a:hover {
   color: #CCCCCC;
}

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[danielh68]

Got it! Thanks a bunch Chris -Dan