Making Hyperlinks Pop with CSS
Sometimes, plain old boring hyperlinks just don’t cut it. This tutorial will take you through adding a background color to your hyperlinks, along with making them change entirely when they are moused over.
First, we’ll start with a plain old HTML web page with nothing more than a few links put in to play with…
The webpage in its beginnings.
Then, we’re going to put a CSS style in, defining all of the 4 possible link states (default, visited, active, and hover). Also note that this particular styling works best in the <body> tag, rather than in the <head> tag that a more “global” style would. First, we start off with giving the links a background color.
The background colors for the links.
Now for the fun part: making the links enlarge and change colors when the cursor is rolled over them. This is also known as a “hovered link”. Simply define all of the styles that you would like these links to take on, in this case, a larger text size, a change in background color, and a change in text color.
The CSS for the hovered links.
And, volià! This is just a small sampling of the fun that can be had with CSS and hyperlinks: you should experiment to see what suits your website best.
The final result, viewed in the Safari web browser.