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…

Basic webpage in Adobe Dreamweaver.

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.

Defining the background color for the links.

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.

Hover properties in the image.

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 of the CSS code for link properties.

The final result, viewed in the Safari web browser.

Ryan Craig

~ by Ryan Craig on October 16, 2011.

5 Responses to “Making Hyperlinks Pop with CSS”

  1. i like this tutorial because it is able to breakdown something people may not see as simple and put it into easy steps for people to understand. the directions are easy to follow and the screen shots explain what is going on in the directions perfectly. nothing is left out.

  2. The underlining really accentuates your point and makes it easier to understand the directions.

  3. You made the steps clear and easy to follow. I’ll have to try this to make links less blain and give my webpage a pop of color! Thanks for sharing.

  4. This tutorial is helpful with all of the pictures and underlining to show exactly what is being put where in the CSS. Adding a hyperlink to the website can definitely make the color pop and it was something I didn’t know how to do before.

  5. This was really helpful because you circled and underlined parts of the steps it made it clear. I love how you should multiple ways of changing links such as having the background color and the font size.

Comments are closed.

%d bloggers like this: