Customize links using CSS
So you’re getting into CSS and want to know how to make some decent looking links, hmm? It’s really quite simple really. In this tutorial, we will go over the three basic kinds of links: “link”, “visited”, and “hover.”
The “link” tag is for the general link when it has never been clicked. The “visited” tag is for links that have been clicked or pages that have already been viewed through that specific URL. The “hover” tag is the coolest one; it is what happens when you put your mouse/cursor over the link.
When creating a CSS code for your links, it must look like this within your stylesheet:
a:link {
color: #333333;
text-decoration: none;
}
This makes your link have no underline and makes the color of the link a dark grey color. You can change these to make it however you want. You can give it a “background-color” tag and allow it to have almost a highlighter effect.
When creating your links using all three tags, they must be in order. This means the “link” and “visited” tags must go first, and the “hover” tag must go last, like so
a:link {
color: #333333;
text-decoration: none;
}
a:visited {
color: #333333;
text-decoration: none;
a:hover {
color: #333333;
text-decoration: underline;
}
You can change any color and text decoration of all of these. You can add “font-weight” tags and make them bold, italic, etc., or you can give them a “background-color” and more…but If the order of your code is not in the proper order, your “hover” effects will not work properly.
You can edit links in specific areas as well by giving your link a specific class id, like this:
CSS Code
links1.a:link {
color: #333333;
text-decoration: none;
}
HTML Code
<a href=”http://www.linktowebsite.com” class=”links1″>Click Here!</a>
You can also change the links of specific DIV’s and Tables by giving them id’s. This is a little different from the last one, but what I like about it is it eliminates giving every single link you want to change it’s own class id. For example
CSS Code:
#content a:link {
color: #333333;
text-decoration: none;
}
HTML Code:
<table width=”100px” height=”100px” id=”content”>….
OR
<div id=”content” class=”content”>….
That’s it! I hope this helps you getting your links to match your website!
What Do You Think?
Know any cool CSS or web design tips or tricks? Have any other questions about how to do something in CSS? Whatever the case may be, I want to hear about it! Let me know at david@funkytower.com!
Take it easy,
David
Tags: CSS, Custom, How To, Links, Web Design
