Without css styling, html links show up as nothing more than blue underlined text. With styling, html links can take on all kinds of characteristics such as background colors that change when a mouse moves over the link or specific fonts, colors, and font sizes, that apply only to links.
1. To explore the world of links, create a brand new html document named css_rollover.html and save it into your stylesheet_example folder. Add a link to mynmi.net within the body tags as in
<a href="http://mynmi.net">The official NMI website</a>
and preview the page. As you can see, this link is plain blue and underlined.
2. Create a new css file named rollovers.css and save it into the same stylesheet_example folder. Inside of rollovers.css create a new rule named a:link and give it the characteristics shown here:
a:link {
background-color: #C5B1B2;
text-decoration: none;
}
As you would expect, the first line gives a background color to all links (you can change the color to whatever you want), while text-decoration removes the underline. Connect rollovers.css to css_rollover.html. If you don’t remember how to connect a css file to an html document, refer to an earlier lesson to refresh your memory.
3. Preview the page. At this point the underline should be gone, there should be a background color, and the text most likely still is blue. To change the text color to black, add another line to the a:link rule:
color: #000000;
As always, feel free to pick a different color.
4. Choose the Font, Size, and Weight that you want to apply to all of your links as in, font-weight: 900 for a very bold font or font-weight: 100 for a very light font and font-size: 20px, font-size 16px, or whatever size and weight that you prefer for your links. This will set the look of your links before anyone clicks on them. Note that you have LOTS of options such as color, ALL CAPS, underline, none, etc. For a long list of text options visit http://www.w3schools.com/Css/css_text.asp.
5. Time to add another characteristic called ‘padding’. Padding, as the name implies, adds space around whichever element that you apply it to. So add
padding: 4px;
to the a:link rule and preview once again to see what happens. Be aware that padding can be added selectively as well as such as padding-left:2px; padding-right:7px; padding-top:1px; and padding-bottom:3px;
6. Return to preview and click your link, visit http://mynmi.net and return. If your link worked properly, it may look different once you return. If so, that’s because links that have actually been clicked or ‘visited’ in html speak, sometimes change characteristics unless you tell them otherwise. To be safe, add a new rule a:visited with the same color and text-decoration characteristics as a:link, as shown here:
a:visited {
color: #ffffff;
text-decoration: none;
}
Also be aware that you can specify custom characteristics for a visited link.
7. Create a new rule named a:hover and set a different background color than a:link. This will create a nice ‘rollover’ effect when someone mouses over the link.
8. Create a final new role called a:active and change it’s background color as well. When someone clicks and holds on the link active will come into play. For fun, you may want to experiment with font sizes on this one as well.
CSS can be very picky and IT IS VERY IMPORTANT TO DO THESE STEPS IN THE PROPER ORDER OF (1) a:link (2) a:visited (3) a:hover and (4) a:active.
Create some links and test it out. Did it work? If so, change it and experiment with different fonts, sizes and effects. Once you have the look that you like be sure that the rollover.css stylesheet is saved.
9. Congratulations, you have created a set of rollover effects that you can use in any future webpage just by attaching rollover.css. [footnote] or by pasting the styles from rollover.css into another CSS document and attaching it[/footnote]
Next: Laying out a website with CSS and div tags