CSS is all about style and the power it provides to manipulate your HTML code. Weblinks are no different in that regard. In this short guide, you will learn how to remove the underline from links, alter link style with CSS, and some other neat tricks for added functionality.

Samples of code and output examples will be provided to help you along the way. Before diving into any of the HTML or CSS below, please take a look at HTML for Dummies and CSS Basics for Beginners for a quick support read-up if you need it.

The HTML Anchor Tag: Your Style Target

To add styles to an HTML link, you first need to have one in the HTML document. To add a link you will need to use the “anchor” tag. The anchor tag essentially “anchors” a link inside the HTML code. The basic syntax of this is displayed below.

<a href=Link to where you need the user to go“>Text to display for the Link></a>

In the sample HTML code below, you can see the anchor tag inserted inside a paragraph element tag.

Using that anchor tag will have it rendered on the page as shown below.

Example HTML render showing how a link is displayed on the page. Code has not remove underline from link css.

You can see that NASA is highlighted and has an underline beneath it as well. Now that the page has a working link on it, the styling process can begin.

Changing the Color of a Link

If you want to alter the color of the anchor tag, it is as simple as declaring a new color in the CSS. In the CSS example below, you can see that the anchor tag was targeted by the “a” on the sheet. 

CSS example code showing the anchor tag color changed to orange red.

With the color of the text changed to the value of orange-red, the link will now render as shown below.

Example HTML render showing the link color changed to orange red instead of the default.
Code did not remove underline from link css.

Just like that, you have a new color used for the links on your page.

Changing the Color of a Link From its State

An HTML link exists in one of four set states depending on user actions. These four states are presented below.

  1. link:     The default state for the link. It has not been used by the end user.
  2. visited:   The end user has visited the link.
  3. hover:    The end user is hovering over the link tag with the mouse.
  4. active:   This is the state the link is in when the end user clicks/presses on it.

These states can be defined and styled using CSS. This is how you can change the CSS link color to what suits your style. In the CSS code example below, you can see how the CSS link color has been modified depending on the state of the HTML link.

Sample CSS code detailing how to change the color of an anchor tag link in the states of link, visited, hover, and active.
The CSS did not remove underline from link css.

In the following images, you can see how the changes are enacted on the HTML page itself. Take note of the sample code above each image for reference.

Sample CSS and HTML image showing the color of the anchor tag's link state changed.
The color of the “link” state has been changed to a light blue.
Sample CSS and HTML image showing the color of the anchor tag's visited state changed.
The color of the “visited” state has been changed to purple
Sample CSS and HTML image showing the color of the anchor tag's hover state changed.
The color of the “hover” state has been changed to a light green
Sample CSS and HTML image showing the color of the anchor tag's active state changed. remove underline from link css is not in use at this time. The underline is on display.
The color of the “hover” state has been changed to red

Adding in these link color effects can be easy enough. However, there is a rule set that needs to be followed when doing so. Think of it as a hierarchy of actions. 

  1. Link
  2. Visited
  3. Hover
  4. Active

Setting these out of order on your CSS can create unforeseen actions as the cascading style of CSS can have one property overriding another. You want to ensure that the correct behavior is being applied as you need it.

How to Remove the Underline From Links Using CSS

Having the underline on an HTML link is not always desirable depending on the overall style of the page. Thankfully, through the great toolbox of CSS, removing the underline link is as simple as adding one more line of code. 

Using the property of “text-decoration” gives you the option to remove the underline. Adding the value of “none” to this property will tell the HTML document not to render the underline that comes default on the link. In the example shown below, you can see this in action.

Sample CSS showing the text-decoration property in use. The remove underline from link css is in effect due to this.
The underline link for the HTML anchor tag is no longer visable.

Note that this property can be set for the link at its various stages as well. If you wanted to set the link to have an underline come back after it had been visited or when a user hovered on it, it would just be a matter of manipulating the text-decoration property.

Creating a Button Link

Sometimes you want to add just a bit more style to your page elements. Links are no different when it comes to spicing it more. In this next example, you will see how you can take a regular link and transform it into a button for the page.

In this example displayed below, additional CSS properties have been used to give the text link the appearance of a styled button instead. Note that the hover effect has also been given additional styles as well.

Sample CSS code showing how add CSS properties make a link appear as a button with hover effects. remove underline from link css is in effect.

Inside the hover selector, the property of “cursor” was used as well. This will change the mouse cursor to a default pointer when hovered over the link.  This provides the following effect on the HTML page when rendered.

A sample GIF image showing how the link button changes when a user hovers over it. remove underline from link cssis applied.

The background, cursor, and text all change when the user hovers over the button. This styling can be attached to each state of the link as well. For example, you could make it so when a user has visited the link, it is set to no longer display as a button if you so desire.  

Learn Even More

These are just some of the lightweight examples that show how powerful CSS can be for a web designer. If you are curious about getting deeper into CSS with some of the examples used here, check out An Introduction to CSS Combinators to learn how to take advantage of multiple HTML tags at once. If you are interested in using gradient backgrounds, take a read into the CSS Background Image Tutorial for an easy-to-follow guide.

However, why stop at just these basics? You can do even more with a step into programming. The creative ability in programming is allowing people to do even more with their ideas. If you want to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.

Start Learning Today!