CSS Link Customization
This article will show you how to have different link style (colors, size, effect) in different areas in the site or on the same page.
You can download a sample html file at the end of this page.
Default link style
To set an overall style for your links in site your CSS will look like this:
a:link{
color:#FF0000;
}
a:visited{
color:#990000;
}
a:hover{
color:#FF9900;
}
a:link is where you set the link colors, background color, size, etc.
a:visited is a link color, size, padding, etc for a link that has already being clicked, visited
a:hover is link settings for the moment when mouse is over the link
A second link style
Now what about if you want to have one link color in top area of your site (header) and another link color in the bottom area of your site (footer)?! In this case you need to place the html code of the link inside a <div> ... </div>, give that div a class name then customize that class in CSS, for example here is the html code for the "header" area:
Then the CSS for the "header" area is like this... you add the dot and class name in front of the default a:link and a:hover:
.header a:link{
color:#006699;
font-size:14px;
text-decoration:none;
padding:5px;
background-color:#DDEEFF;
}
.header a:visited{
color:#003399;
font-size:14px;
text-decoration:none;
padding:5px;
background-color:#DDEEFF;
}
.header a:hover{
color:#0099CC;
text-decoration:none;
padding:5px;
background-color:#E9FCFC;
}
For other areas of the page do the same, place links in a div, give it a class name like header, footer, left_links, top_links, etc then inside the CSS file write that class name before the a:link.
This is "header"
Default link styles:
And this is "footer"