Without CSS styling, 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.
To explore the world of links, create a brand new HTML document named rollover.html.
Save this file in your—you guessed it!—webdev folder.
Add a link to mynmi.net within the body tags, such as:
<a href="https://nmi.cool/">The official NMI website</a>
When you’re done, preview the page. As you can see, this link is by default, blue and underlined. It’s time to switch up that style!
Create a folder named css in your webdev folder.
Create a new css file named rollover.css. Since this is a CSS file, not an HTML file, we do not need to add the HTML boilerplate.
Inside of rollover.css, create a new rule named a:link and give it the following characteristics:
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.
Linking to an external stylesheett
Link rollover.css to rollover.html. How?
Add the link for your external stylesheet must appear in the <head> element of your HTML document. The link element should look like this:
<link href="css/rollover.css" rel="stylesheet">
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.
Choose the font, size, and weight that you want to apply to all of your links. For example, you can use font-weight: 900 for a very bold font or font-weight: 100 for a very light font and font-size: 20px, font-size 16px, you get the idea. This will style your links BEFORE anyone clicks on them. You’ll need to save both your HTML and CSS files to see your changes.
Check out more CSS options to add to your links!
Time to add another characteristic called padding. Padding, as the name implies, adds space around whichever element that you apply it to. Add the following to the a: link rule.
padding: 4px;
Visited Links
Many links look different once they’ve been selected.
If so, that’s because visited links usually change characteristics unless you tell them otherwise.
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;}
Rollover effect
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.
Create a final new role called a:active and change that 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 is called Cascading Style Sheets for a reason—order matters! Be sure to write them in the order specified: (1) a:link (2) a:visited (3) a:hover and (4) a:active.
Note: this exercise is best previewed using the tried and true preview method: opening it in your browser.
When you’re done, upload the css folder, containing the CSS file, as well as the newly created HTML file, to your webdev folder.