- CSS Link Color Guide With Examples
- Contents
- CSS Link Color: Main Tips
- Link States
- CSS Link Color
- Text Decoration
- Background Color
- Link Buttons for a Navigation Menu
- CSS Link Color: Summary
- CSS Links
- Styling Links
- Example
- Example
- Text Decoration
- Example
- Background Color
- Example
- Link Buttons
- Example
- More Examples
- Example
- Example
- Example
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- HTML Links — Different Colors
- HTML Link Colors
- Example
- Link Buttons
- Example
- HTML Link Tags
- How to change the color of links on a web page
- Understanding the different types of hyperlinks
- CSS link color example
- HTML body tag example
- Related information
CSS Link Color Guide With Examples
TL;DR – Properties can add CSS link colors according to link states.
Contents
CSS Link Color: Main Tips
- There are 4 link states: a:active , a:hover , a:visited , and a:link .
- To avoid behavior overlapping, these states should go in the following order:
- a:hover should go after a:link and a:visited .
- a:active should go after a:hover .
Link States
Different link states can have individual properties of link color in CSS. Developers choose to change the default style and color of URLs to make links match their web designs.
Here are the states you can change link color for with CSS:
- a:link – unvisited.
- a:hover – when the mouse pointer hovers over it.
- a:active – when a user clicks the link.
- a:visited – visited link.
In the following example, we have all four link states with different colors:
CSS Link Color
Links that have the same color as the rest of the text are more difficult to notice. You should always change the CSS link color to make it stand out.
To change link color, CSS value should be assigned to the color styling property. There are several ways to describe colors. You can use color names, RGB indicators ( rgb() ) or HEX indicators ( #ffffff ).
In the following example, a CSS link is assigned a color :
Don’t miss a chance to try out our new Pickeristic color scale for setting CSS link colors.
Tip: Pickeristic provides you with RGB, HSLA indicators and other codes of colors. You can create sets of colors for your project, generate colors randomly and even mix them.
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
Text Decoration
By default, links have underlines. To remove underline from link with CSS, use the CSS text decoration property.
It has four possible values: underline , overline , line-through , and none .
The example below makes CSS remove underline from link by adding text-decoration:none; . We set text-decoration values for each of the link states with CSS: only active and hover states have underlines:
a:link < text-decoration: none; > a:visited < text-decoration: none; > a:hover < text-decoration: underline; > a:active < text-decoration: underline; >
Background Color
Besides setting link color in CSS, it is possible to add a background-color property.
a:link < background-color: green; > a:visited < background-color: blue; > a:hover < background-color: red; > a:active < background-color: pink; >
The property is similar to the CSS link color. You can use the same value indicators as well.
Tip: it is common to set a background color on the hover state.
Link Buttons for a Navigation Menu
The control of the link color with CSS is not all. It is common for developers to style links as buttons (for instance, for a navigation menu of web sites).
Home Categories FAQ Contacts Feedback
Here are the CSS properties necessary for styling buttons or tabs that lead to other parts of a web site:
- color – to set the color of the text which represents the link
- background-color – to add colors to the button
- padding – to determine the size of the button
- text-decoration – to remove underline from links
- text-align – to set the alignment of links
- display – to describe how your link should be shown
In this example, we combine these CSS properties to display links as buttons:
a:link, a:visited < background-color: purple; border: none; color: #FFFFFF; padding: 15px 32px; text-align: center; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; text-decoration: none; font-size: 16px; cursor: pointer; display: inline-block; > a:hover, a:active < background-color: #6D0062; >
Additionally, you can use font-family, font-size, font-weight, or others to match your web design.
CSS Link Color: Summary
- You can style cursors as well by adding cursor: pointer as one of the properties.
- Choosing the link color CSS depends on the overall design of websites. Make sure that modified styles of links do not make links more difficult to find.
CSS Links
With CSS, links can be styled in many different ways.
Styling Links
Links can be styled with any CSS property (e.g. color , font-family , background , etc.).
Example
In addition, links can be styled differently depending on what state they are in.
The four links states are:
- a:link — a normal, unvisited link
- a:visited — a link the user has visited
- a:hover — a link when the user mouses over it
- a:active — a link the moment it is clicked
Example
/* unvisited link */
a:link color: red;
>/* visited link */
a:visited color: green;
>/* mouse over link */
a:hover color: hotpink;
>/* selected link */
a:active color: blue;
>When setting the style for several link states, there are some order rules:
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Example
a:visited text-decoration: none;
>a:hover text-decoration: underline;
>a:active text-decoration: underline;
>Background Color
The background-color property can be used to specify a background color for links:
Example
a:link <
background-color: yellow;
>a:visited background-color: cyan;
>a:hover background-color: lightgreen;
>a:active background-color: hotpink;
>Link Buttons
This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:
Example
a:link, a:visited <
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
>a:hover, a:active background-color: red;
>More Examples
Example
This example demonstrates how to add other styles to hyperlinks:
Example
Another example of how to create link boxes/buttons:
a:link, a:visited <
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
>a:hover, a:active background-color: green;
color: white;
>Example
This example demonstrates the different types of cursors (can be useful for links):
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
HTML Links — Different Colors
An HTML link is displayed in a different color depending on whether it has been visited, is unvisited, or is active.
HTML Link Colors
By default, a link will appear like this (in all browsers):
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
You can change the link state colors, by using CSS:
Example
Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. An active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will become red and underlined:
a:visited color: pink;
background-color: transparent;
text-decoration: none;
>a:hover color: red;
background-color: transparent;
text-decoration: underline;
>a:active color: yellow;
background-color: transparent;
text-decoration: underline;
>
Link Buttons
A link can also be styled as a button, by using CSS:
Example
To learn more about CSS, go to our CSS Tutorial.
HTML Link Tags
For a complete list of all available HTML tags, visit our HTML Tag Reference.
How to change the color of links on a web page
Below are the steps on how you can change the color of the links shown on your web page using HTML and CSS. Although the link colors can be done with the HTML BODY tag, we always recommend doing any styling settings in CSS as shown below.
When defining the color of any web page element, you may need to use HTML color codes. For major colors, you can also specify the names of those colors instead of using the color codes, for example, red, blue, green, and black instead of using their respected color code values.
Understanding the different types of hyperlinks
Hyperlinks are special elements on your page, because they are interactive. To indicate that they are interactive, they are colored differently depending on their state. A hyperlink has three special colors, in addition to its default blue color, which represent three different states:
- Visited link — The color of a visited link. If a hyperlink is this color, the user can expect that clicking the link takes them to a page they’ve already seen. Purple is the default hyperlink color for a visited link.
- Hover link — The color when the mouse is hovering over a link. If a hyperlink is this color, the user can expect that pressing the left mouse button (clicking), then releasing the button, causes the link to be visited. Hover color is the same for both «Active» and «Visited» links.
- Active Link — The color of the link when being clicked. When the user sees this color, they can expect that releasing the mouse button causes the browser to visit the link.
See our hyperlink definition for further information and related questions to hyperlinks.
CSS link color example
In the CSS example below, we are setting the hyperlink colors to resemble what is shown on this page. First, all anchors are set to the #2c87f0 (shade of blue), #636 a shade of purple, and all hover and active links color:#c33 (red). The below code can be added to the CSS style element or in your .css file.
a < color: #2c87f0; >a:visited < color: #636; >a:hover, a:active, a:focus
If your page isn’t using CSS, the steps below show how to do this in the HTML BODY tag. However, as mentioned earlier, we highly recommend using the above CSS code instead of the body tag. You can add the above code into a CSS file and link all your web pages to that CSS file. Then, you could change the background-color values in that one CSS file to instantly change the background color of all pages linking to it.
HTML body tag example
In some very rare situations, it may not be possible to use CSS. For those situations, you can also define the background color, text color, link color, and other values in the HTML body tag as shown below.
Below are the descriptions of each of the HTML attributes in the body tag.
TEXT = The color of text.
LINK = The color of links.
VLINK = Visited link color.
ALINK = Color of the active link or the color the link changes to when clicked.
BGCOLOR = The page background color.Related information
- How to create multicolor links in HTML.
- How to create an HTML link on a web page.
- How to create a link with no underline in HTML.
- See the CSS, HTML tag, and hyperlink pages for further information.
- See our HTML color code page for a full listing of color codes.
- CSS and HTML color help and support.