How to Style an Anchor Tag with CSS

In this tutorial, we will go over how you can style an anchor tag in CSS.

There are 2 ways in which anchor tags can be placed in an HTML web page. How anchor tags are placed in a web page determines how it is styled.

We will go over both ways anchors tag exist inside of a HTML document.

Styling Anchor Tags Assigned to a Class

Look at the following link: Link to this page.

You can see how the link untouched is orange. When it is hovered over, it is yellow. When it is visited, it turns green. When it is active, it is red.

We will show how to do this below.

Probably the easiest and efficient way to create an anchor tag, so that it can later be styled is to create the anchor tag and assign it to a class, using the format shown below:

<a href="#" class="newanchor">Text to be shown on screen</a>

where href is assigned the place on the web where you want to direct the user, newanchor is the name of the class we assign that anchor tag to, and Text to be shown on screen is the text of the anchor tag that is visible to the user and that gets clicked.

Here, href is assigned to a #(hash symbol), because we're using the a tag, just for styling purposes, not actually to redirect users to a place on the web.

Now that we assigned the anchor tag to the class named newanchor, let's go over how we would style this in CSS to produce the effect shown above.

CSS Code

We would add the following lines of code to the CSS file:

.classname:link {color:orange;} .classname:visited {color:green;} .classname:hover {color:yellow;} .classname:active {color:red;}

When styling the text of the link itself, we simply reference the anchor tag class name only, and we change change things such as the text's color and other attributes. When referencing the special attributes of the anchor tag, such as link, visited, hover, and active.

These 4 special attributes are explained below:

• link- This references the text of the link itself. Note that there are 2 ways in CSS in which we can modify the text of a link. We can either just directly reference the class name of the link. Referencing the attribute link is the same as referencing the class name directly. (.classname { } and .classname:link{ } both reference the same text of the link.
• visited- This refers to a link on a page after the user has clicked on it. After the user clicks on a link, the link is said to be visited. After this link is visited, you can change its appearance to anything you want it to be. Most of the times, simply the color is changed, so that the user visiting a site can know that s/he has already clicked on that link.
• hover- This refers to a link on a page when a user hovers the mouse over the link. When a user has the mouse pointer on the link, the webmaster can change the link's apperance to anything. Usually the color of the link is programmed so that it changes to a different color and the underline of the link may disappear. Again, as a programmer, you can change this to anything with this attribute.
• active- This refers to a link the split second after it is clicked, to show that the user clicked it and that the click has gone through. Usually, again, this is simply a color change of the text of the link to some other color.

This is the procedure done when an anchor tag has a class assigned to it.

Styling Anchor Tags inside of an HTML Tag

Normally, the other way in which an anchor tag may exist on a HTML page is that it may exist within an HTML tag, such as a p (paragraph) tag or a diV tag or any other various tag, such as shown below:

<p><a href="#">This is an anchor tag within a ptag</a></p> <div><a href="#">This is another anchor tag within a div tag</a></div>

You can see above that these plain anchor tags exist within HTML tags such as a p tag or a div tag. They aren't assigned to any class.

So how can we now reference these anchor tags without them being assigned to an id or a class.

And we did this in CSS with the following code:

p a:link {color:maroon;} p a:visited {color:green;} p a:hover {color:red;} p a:active {color:yellow;} div a:link {color:maroon;} div a:visited {color:green;} div a:hover {color:red;} div a:active {color:yellow;}

And if the p or div tag is assigned to a class or id, such as <p class="first"> or <div class="second">, we would reference these in CSS with the following lines:

.first a:link {color:maroon;} .first a:visited {color:green;} .first a:hover {color:red;} .first a:active {color:yellow;} .second a:link {color:maroon;} .second a:visited {color:green;} .second a:hover {color:red;} .second a:active {color:yellow;}

And this is how we can style anchor tags in CSS.