Hyperlink Styling in HTML
● Learn a:link, a:visited, a:hover, and a:active tags.
✓ 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.
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 …
✓ … 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:
✓ To make the underline appear ONLY on hover, set text-decoration: none; under a:link
✓ To make the underline appear ONLY on hover, you must specify text-decoration: none; on all tags except a:hover
✓ On a:hover type -
✓ 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:
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%
Step #9: Size Changing Links ~
✓ Another example would be links that change in size when hovered, like this:
Step #10: Background Color ~
✓ The last example changes link background color when hovered, like this:
✓ 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 …