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.
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.
With the color of the text changed to the value of orange-red, the link will now render as shown below.
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.
- link: The default state for the link. It has not been used by the end user.
- visited: The end user has visited the link.
- hover: The end user is hovering over the link tag with the mouse.
- 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.
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.
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.
- Link
- Visited
- Hover
- 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.
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.
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.
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.
