Summary:

Hyperlink Styling in HTML

    ●   Learn a:link, a:visited, a:hover, and a:active tags.


Learn About:

hex color codes in HTML CSS style tags Hyperlink styling

  •   Add C olor to your links!

  •   This tutorial is part of the Fan-Tasitic Project.

 

Other People's Work:

Here are examples of work inspired by this tutorial.




Member's Profile | Music and Lyrics | Gallery Fan Art | More

Step #1: Open your Page in Dreamweaver ~

Open your index page in Dreamweaver and look between the <head></head> tags in Split view …

… and clear some space to work in.


Step #2: Style Sheet ~

Copy the following code and paste it between the <head> </head> tags …


<style type="text/css">

</style>

 

… like this.


Step #3: a:link code ~

Add the following code between the <style type="text/css"> </style> tags …

… with the following result:


Step #4: Add a:visited ~

Now make the next tag:


Step #5: 4 Tags Total ~

Continue adding 4 kinds of link types …

 

 

 

Remember to put them in decending order:


a:link > a:visited > a:hover > a:active

 

 

 

An easy way to remember the order is:


"Las Vegas Has Attractions."

 

Step #6: Underline ~

Most people only want the underline to appear when you hover over it:


UNDERLINE


To make the underline appear ONLY on hover, set text-decoration: none; under a:link

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



a:link {

		text-decoration: none;
}

a:visited {

		text-decoration: none; 

}

a:hover {

		text-decoration: underline;
		color: red;
}

a:active {

		text-decoration: none;
}

 

To make the underline appear ONLY on hover, you must specify text-decoration: none; on all tags except a:hover



On a:hover type -



text-decoration: underline;



Also add C olor to your a:hover - something that contrasts against your background.

 



Step #7: Underline-Overline ~

Or you can have links that are both underlined overline - like this:


UNDERLINE-OVERLINE



a:hover {

		text-decoration: underline overline;
		color: orange;

}


 

Step #8: Font-Size ~

Change the: Size of your Links


Under a:link add this:


Choose the  font-size tag and experiment with different sizes …

Don't forget the semi-colon ;


Lots of choices!


10px, 12px, 14px, 16px, 18px, 24px, 36px, large, larger, x-large, xx-large, medium, small, smaller, x-small, xx-small, 120%, 150%


Experiment here: http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=xx-small


Step #9: Size Changing Links ~

Another example would be links that change in size when hovered, like this:

SIZE CHANGING LINKS

a:link {

		text-decoration: none;
		font-size: large;
}

a:visited {

		text-decoration: none;

}

a:hover {

     font-size: 150%;
     font-weight: bold;
     color: red;
}

a:active {

     text-decoration: none;
}

 

Step #10: Background Color ~

The last example changes link background color when hovered, like this:

BACKGROUND COLOR


a:link {
		
		text-decoration: none;
		font-size: x-large;
}

a:visited {

     text-decoration: none;

}

a:hover {

     font-size: 150%;
     font-weight: bold;
     color: red;
}

a:active {

     background: #FFCC00; 
     color: orange;
}

 

There are MILLIONS of other colors available for your fonts.

Search the internet for colors in HTML find a unique color, and copy the Hex Code.

 

Step #11: What do the Codes mean ~

Links have 4 basic parts:


a:link - a:visited - a:hover - a:active


Step #12: Many More Options ~

Once you have your links styled, copy them

and paste the code between the head tags of ALL your pages so your links look the same! 


Last Step: Save and Upload your Work ~

If you have a web server, save your pages, upload them and attach the URL link to your site …


Other Resources: http://www.tizag.com/htmlT/font.php and http://www.echoecho.com/csstext.htm and http://www.echoecho.com/csslinks.htm