How to Remove Blue Underline from Links using CSS
Table of Contents
Links on the web are fundamental to being able to navigate through pages.
Unfortunately, the default styles for links are usually one that you will want to override.
This is because by default, links are both blue and underlined.
In this post, we'll learn how we can use CSS to override the styles of links.
How to override the styles of links
As mentioned before, the two most common thinks you'll want to override is the color of the link and remove the underline.
Let's start with an example link:
HTML<a href="https://sabe.io">Sabe.io</a>
- HTML
This has the default styles of a link, blue and with an underline.
Now, to replace the blue, simply target the link's a
tag and change the color to whatever you want, in this case, black:
HTML<a href="https://sabe.io">Sabe.io</a>
CSSa {
color: black;
}
Let's check it out using the editor:
- HTML
- CSS
Now, we just need to remove the underline.
This is accomplished by adding the text-decoration: none
rule to the link's a
tag:
HTML<a href="https://sabe.io">Sabe.io</a>
CSSa {
color: black;
text-decoration: none;
}
Now when we take a look, we'll see that the link is no longer blue and has no underline, yet still functions like a normal link:
- HTML
- CSS
Conclusion
In this post, we learned how to override the default styles of a link in CSS and getting rid of the underline and blue.
Simply target the a
tag and change the color to a new color and remove the text-decoration
.
Thanks for reading!
- Create an RSS Reader in Node
- How to deploy a PHP app using Docker
- Getting Started with Deno
- Learn how to use v-model with a custom Vue component
- Using Puppeteer and Jest for End-to-End Testing
- How to Scrape the Web using Node.js and Puppeteer
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Getting User Location using JavaScript's Geolocation API
- Creating a Twitter bot with Node.js
- Using Push.js to Display Web Browser Notifications
- Setting Up Stylus CSS Preprocessor
- Getting Started with Vuex: Managing State in Vue