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.

Источник

How to Change Link Colors with CSS

There are three ways of changing the link color: inline, internal and external.

Inline method

Add the style attribute directly to the hyperlink code and specify the color property through the style attribute, then give a color value to it.

Example of changing a link color with the inline method:

html> html> head> title>Title of the document title> head> body> p>Visit our a href="https://www.w3docs.com/" style="color: #8ebf42">website a>. p> body> html>

Result

Internal method

Example of changing the link color with the internal method:

html> html> head> title>Title of the document title> style> a < color: #8ebf42; > style> head> body> p>Visit our a href="https://www.w3docs.com/">website a>. p> body> html>

There are 4 link states that links can be styled depending on what state they are in:

• a:link — a normal, unvisited link,
• a:visited — a link the user has visited,
• a:hover — a link when a user mouses over it,
• a:active — the moment a link is clicked.

When setting the style for several link states, follow these rules:

Example of using different link states:

html> html> head> title>Title of the document title> style> /* unvisited link */ a:link < color: #ccc; > /* visited link */ a:visited < color: #095484; > /* mouse over link */ a:hover < color: #8ebf42; > /* selected link */ a:active < color: #800000; > style> head> body> p>Visit our a href="https://www.w3docs.com/">website a>. p> body> html>

How to change the colors of the hyperlink underline and anchor text

To change the underline color, first of all, you need to remove it with the «none» value of the text-decoration property and set the «none» value, then add the border-bottom property with the width (in this case, used as a hyperlink underline width) and border-style (solid, dotted, or dashed) properties. For the anchor text color, use the color property.

Example of changing a hyperlink underline and anchor text color:

html> html> head> title>Title of the document title> style> a < text-decoration: none; > a:link < color: #000; border-bottom: 1px solid #ff0000; > a:visited < color: #e600e6; border-bottom: 1px solid #b3b3b3; > a:hover < color: #2d8653; border-bottom: 1px solid #000099; > style> head> body> p>Visit our a href="https://www.w3docs.com/">website a>. p> body> html>

Example of styling links with the mentioned methods:

html> html> head> title>Title of the document title> style> a.one:link < color: #ccc; > a.one:visited < color: #095484; > a.one:hover < color: #8ebf42; > a.two:link < color: #ccc; > a.two:visited < color: #095484; > a.two:hover < font-size: 150%; > a.three:link < color: #ccc; > a.three:visited < color: #095484; > a.three:hover < background: #8ebf42; > a.four:link < color: #ccc; > a.four:visited < color: #095484; > a.four:hover < font-family: monospace; > a.five:link < color: #095484; text-decoration: none; > a.five:visited < color: #095484; text-decoration: none; > a.five:hover < text-decoration: overline underline; > style> head> body> p>Mouse over the links and watch how they will be changed: p> p> a class="one" href="#">This link changes color a> p> p> a class="two" href="#">This link changes font-size a> p> p> a class="three" href="#">This link changes background-color a> p> p> a class="four" href="#">This link changes font-family a> p> p> a class="five" href="#">This link changes text-decoration a> p> body> html>

Now, we’ll demonstrate another example, where we use the color property with its «inherit» value. This will make the element take the color of its parent.

Example of changing the link color with the «inherit» value of the color property:

html> html> head> title>Title of the document title> style> p < color: green; > p a < color: inherit; > style> head> body> h1>Example h1> a href="https://www.w3docs.com/">W3docs.com a> p>Visit our a href="https://www.w3docs.com/">W3docs.com a> website. p> body> html>

Example of styling links with the CSS text-decoration-color property:

html> html> head> title>Title of the document title> style> a < text-decoration-color: grey; > a:link < color: #777777; > a:hover < color: #2d8653; > style> head> body> p>Visit our a href="https://www.w3docs.com/">website a>. p> body> html>

External method

Using external stylesheets you can take control of all the hyperlinks of your site. With external stylesheets, many attractive hyperlink effects can be created to develop the look of your website.

With the external method, you’ll link your web pages to an external .css file that can be created by any text editor in your device. This is a more efficient method, especially when you need to style a large website. You can change your whole site at once by editing one .css file.

Источник

How to Change Text Color in HTML – Font Style Tutorial

Joel Olawanle

Text plays a significant role on our web pages. This is because it helps users learn what the web page is all about and what they can do there.

When you add text to your web pages, this text defaults to a black color. But sometimes you will want to change the text color to be more personalized.

For example, suppose you have a darker color as the background of your website. In that case, you’ll want to make the text color a lighter, brighter color to improve your website’s readability and accessibility.

In this article, you will learn how to change the color of your text in HTML. We’ll look at various methods, and we’ll discuss which method is best.

How to Change Text Color Before HTML5

Before the introduction of HTML5, you’d use to add text to websites. This tag takes the color attribute, which accepts the color as a name or hex code value:

 Welcome to freeCodeCamp. // Or Welcome to freeCodeCamp. 

This tag got depreciated when HTML5 was introduced. This makes sense because HTML is a markup language, not a styling language. When dealing with any type of styling, it is best to use CSS, which has the primary function of styling.

This means for you to add color to your web pages, you need to make use of CSS.

In case you are in a rush to see how you can change the color of your text, then here it is:

// Using inline CSS 
Welcome to freeCodeCamp!
 // Using internal/external CSS selector

Suppose you are not in a rush. Let’s briefly dive right in.

How to Change Text Color in HTML

You can use the CSS color property to change the text color. This property accepts color values like Hex codes, RGB, HSL, or color names.

For example, if you want to change the text color to sky blue, you can make use of the name skyblue , the hex code #87CEEB , the RGB decimal code rgb(135,206,235) , or the HSL value hsl(197, 71%, 73%) .

There are three ways you can change the color of your text with CSS. These are using inline, internal, or external styling.

How to Change Text Color in HTML With Inline CSS

Inline CSS allows you to apply styles directly to your HTML elements. This means you are putting CSS into an HTML tag directly.

You can use the style attribute, which holds all the styles you wish to apply to this tag.

You will use the CSS color property alongside your preferred color value:

// Color Name Value 
Welcome to freeCodeCamp!
 // Hex Value 
Welcome to freeCodeCamp!
 // RGB Value 
Welcome to freeCodeCamp!
 // HSL Value 
Welcome to freeCodeCamp!
 

But inline styling isn’t the greatest option if your apps get bigger and more complex. So let’s look at what you can do instead.

How to Change Text Color in HTML With Internal or External CSS

Another preferred way to change the color of your text is to use either internal or external styling. These two are quite similar since both use a selector.

For internal styling, you do it within your HTML file’s tag. In the tag, you will add the tag and place all your CSS stylings there as seen below:

While for external styling, all you have to do is add the CSS styling to your CSS file using the general syntax:

The selector can either be your HTML tag or maybe a class or an ID . For example:

// HTML 
Welcome to freeCodeCamp!
 // CSS p

// HTML 
Welcome to freeCodeCamp!
 // CSS .my-paragraph

// HTML 
Welcome to freeCodeCamp!
 // CSS #my-paragraph

Note: As you have seen earlier, with inline CSS, you can use the color name, Hex code, RGB value, and HSL value with internal or external styling.

Wrapping Up

In this article, you have learned how to change an HTML element’s font/text color using CSS. You also learned how developers did it before the introduction of HTML5 with the tag and color attributes.

Also, keep in mind that styling your HTML elements with internal or external styling is always preferable to inline styling. This is because it provides more flexibility.

For example, instead of adding similar inline styles to all your

tag elements, you can use a single CSS class for all of them.

Inline styles are not considered best practices because they result in a lot of repetition — you cannot reuse the styles elsewhere. To learn more, you can read my article on Inline Style in HTML. You can also learn how to change text size in this article and background color in this article.

I hope this tutorial gives you the knowledge to change the color of your HTML text to make it look better.

Embark on a journey of learning! Browse 200+ expert articles on web development. Check out my blog for more captivating content from me.

Источник