[CSS] How to specify the color of the link?

A text link used when there is a reference page, etc. within a website.

You can change the color of this text link by setting it with CSS.

“How do you set it with CSS?” “What color is the correct answer to use?”

This time, for those who have such a question and want to know how to change the color of the link with CSS,

I will explain according to the above items.

After reading this article, you will learn how to change the color of links using CSS .

Please read to the end!

How to change link color with CSS?

First, let’s create the link in HTML.

<a href="#">リンクをクリック！</a>

If you enclose it with a tag as above, the text inside becomes a text link. Clicking this will take you to another page.

The text is still colored as it is, but this is a browser specification and varies from browser to browser.

Now let’s set this color ourselves using CSS. To change the color of the link, specify the element name a in the selector .

a {
  color: green;
}

Can you confirm that the color of the link has changed to green?

This time, I specified green for clarity, but as I will explain later, it is said that the color of the link should be blue.

It is better to avoid colors that are difficult to understand for links.

You can also use CSS to specify a variety of things other than text color.

A common specification for links is the text-decoration property that hides the underline.

a {
  color: green;
  text-decoration: none;
}

This way you can hide the underlining of links.

Conversely, use “text-decoration:underline” to display an underline.

How to prevent color change

If you don’t specify CSS for a link, the link will have browser-specific colors.

In addition to this default, colors are also determined when clicked or when a link is visited.

By specifying a color for the a element, these colors will also be the same, and you can prevent the color from changing depending on the state.

Also, use pseudo-classes to specify colors for each state .

a:visited {
  color: blue;
}

This will change the color of the visited site links.

There are three other pseudo-classes that specify link states:

Among them, :hover, which is the state where the mouse cursor is hovered, is often used.

Please try various things.

What is the best link color?

You can freely specify the color of the link, but you need to be careful when choosing the color.

You want a color that makes it easy to tell if it’s a clickable link .

Here, we will explain the color specification in detail.

Best colors for text links

The best color for text links in sentences is blue .

Search engines such as Google, as well as many sites use blue colors, so you can intuitively recognize it as a link.

Unless there is a special reason, it is better to keep it all in blue.

How to specify according to location

For text links within sentences, blue is good, but not necessarily everywhere else .

For example, footers often have a background color, and depending on the color, putting blue text over it would create a sense of incongruity.

It is better to avoid blue color in the sidebar as well. Categories and other items in the sidebar are considered clickable, so they don’t need to be blue.

Using blue for many links can also give the impression of an old-fashioned site.

It seems better to specify the blue color only for text links.

Summary: Master the use of links

In this article, I will show you how to change the color of links using CSS.

You also learned that different colors are best suited for different locations of links.

Knowledge of links is essential for creating web pages .