CSS - Hyperlinks

Here you learn how to format hyperlinks using CSS.

How to Code a Hyperlink

There are 4 different types of hyperlinks. They are:

1. link - this is a normal link.
2. visited - this is a link after it has been clicked on.
3. hover - this is what a link looks like when you move the mouse over it.
4. active - this is what a link looks like as it is being clicked (after you click the mouse button down but before you lift you finger off it.

The syntax for creating the CSS link format is to have "a:link" followed by the formatting in brackets. A problem arises when you want to use CSS to code different sets of links different ways. To do this you can code your default site-wide links using the code I just explained and then create a seperate class of links for each additional type of links you want. The syntax for a class of links will be the "a.custom:link" followed by the formatting in brackets. You can see both examples in the CSS file below.

Popular Formatting

The current trend regarding default links is to show no underline when they are normally shown while having underlines on mouseovers. I think this looks good but there is nothing wrong with formatting them the traditional way of having underlines on normal links. Another acceptable formatting technique is to make the font bold on mouseover while not bold as a normal link. This is a good subtle way of highliting the text while not distorting it. Something you don't want to do is to change the font size of the text on mouseover so the the text actually gets bigger on mouseover. I think this looks horrible. So feel free to change the font color and decoration but not the font type or size. The latest trendy technique that Web 2.0 pages are using is to change the color of the background area where the link is. I didn't like this technique when it first came out because I thought it looked amatuerish but it has grown on me. Although I don't think it fits with corporate pages and looks better on fun pages.

My Formatting Preferences

When I format links for all my sites I use a the same principles for all of them. First, I leave out the active format totally because I don't think there needs to be special formatting for it. Then I set the normal links to be a color within my overall color scheme for the page. So if I have a dark green header then I may have dark green or light green links. Then I set the hover color to a color different than the normal color. Most people set it to a color completely different than the normal link but the tasteful way to do it is to set it as a color in the same color family as the normal link but a different darkness. For example if you have red links then you can do pink mouseovers or if you have light blue links then do dark blue mouseovers. This way the mouseover colors stay within the color scheme of your page and don't look tacky when a completely unrelated color pops onto the page when you mouseover the link.

Then I usually have the visited link be equal to the normal link because it can throw off the color scheme of your page when you have all the links on your page as two different colors. One time when you should have visited links be a different color is when you have a huge directory of links that someone is surfing through and it will make it easier for your visitors to know which links they have clicked on already. This will be especially true if the links labels all have the same words. This happens on porn pages alot. An example would be:

View Pics Gallery!
View Pics Gallery!
View Pics Gallery!
View Pics Gallery!

Hyperlinks

External CSS File

This is your external CSS file named "stylesheet.css".


	a.link { color: red; font-family: arial; text-decoration: underline; } a.visited { color: red; font-family: arial; text-decoration: underline; } a.hover { color: blue; text-decoration: underline; } .custom { color: green; font-family: arial; text-decoration: underline; } a.custom:link { color: green; font-family: arial; text-decoration: underline; } a.custom:visited { color: green; font-family: arial; text-decoration: underline; } a.custom:hover { color: purple; text-decoration: underline; } .custom2 { color: #8A84FF; font-family: arial; text-decoration: none; } a.custom2:link { color: #8A84FF; font-family: arial; text-decoration: none; } a.custom2:visited { color: #8A84FF; font-family: arial; text-decoration: none; } a.custom2:hover { color: #08018B; text-decoration: underline; background-color: #8A84FF; }

PHP Page


	<html> <head> <title>HTML tutorial</title> <link rel=stylesheet type="text/css" href="/stylesheet.css"> </head> <body> <br> <b>This would be your default site-wide link.</b><br> <a href="css-hyperlinks.php">default link</a><br> <a href="css-hyperlinks.php">default link</a><br> <a href="css-hyperlinks.php">default link</a><br> <a href="css-hyperlinks.php">default link</a><br> <br> <b>This is a custom class of links called "custom".</b><br> <a class=custom href="css-hyperlinks.php">custom link</a><br> <a class=custom href="css-hyperlinks.php">custom link</a><br> <a class=custom href="css-hyperlinks.php">custom link</a><br> <a class=custom href="css-hyperlinks.php">custom link</a><br> <br> <b>This is a custom class of links called "custom2".</b><br> <a class=custom2 href="css-hyperlinks.php">custom link</a><br> <a class=custom2 href="css-hyperlinks.php">custom link</a><br> <a class=custom2 href="css-hyperlinks.php">custom link</a><br> <a class=custom2 href="css-hyperlinks.php">custom link</a><br> <br> </body> </html>

This is how it looks


	This would be your default site-wide link. default link default link default link default link This is a custom class of links called "custom". custom link custom link custom link custom link This is a custom class of links called "custom2". custom link custom link custom link custom link