Html href link color css

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.

Источник

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 href link color css

Какой он Цвет ссылки по умолчанию, на данной странице, вы этот Цвет ссылки по умолчанию увидеть не сможете, если только я не пропишу в стилях этот цвет специально -> из браузера Яндекс #0000ee !
Cделал специально для вас отдельную страницу пример -> example.html, на которой нет никаких стилей кроме ссылки посещенной — она может иметь вот такой цвет.

В разных браузерах цвет ссылка и по умолчанию может быть разным!:

Цвет ссылки по умолчанию в Microsoft Edge

пример -> style=»color:#0066cc;»
Для примера приведу цвет ссылки посещенной — это пункт 1(цвет был взят из браузера Яндекс #551a8b )
И цвет посещенной в Microsoft Edge #800080 Если мы откроем исследовать элемент, к примеру Яндекс браузер, и посмотрим стили по умолчанию, то увидим, что у ссылки цвет, какой-то непонятный. -webkit-link этот цвет -> из браузера Яндекс #0000ee !

Как удалить/изменить цвет ссылки по умолчанию !?

Для того, чтобы удалить/изменить цвет ссылки по умолчанию нужно просто прописать стили для ссылки!

Давайте самый простой пример разберем как это сделать!?

Если требуется удалить/изменить цвет ссылки по умолчанию, то пишем просто:

В нашем случае так не получится, потому, что на сайте уже сделаны стили для ссылок, поэтому создаем ссылку с каким-то классом:

Напишем стиль для данной ссылки с классом . И добавим hover:

Как подобрать цвет ссылки

Модно подобрать цвет используя -> генератор цвета

Либо Нажимаем по ссылке ПКМ и выйдет новое окно — где нужно исследовать элемент

Ищем в коде нашу ссылку — она справа показана — видим, что напротив нашей ссылки цвет — нажимаем по нему и выбираем в новом окне тот цвет, который нужен.

Задать цвет ссылки css

Рассмотрим несколько вариантов — как задать цвет ссылки:

Задать цвет только для этой ссылки

1). Цвет ссылки можно задать точечно, только для данной ссылки. Используя прямо в теге ссылки стили style=»color:violet;»
текст_ссылки см.пункт 1 по умолчанию

Как вы наверное увидели, то довольно странное поведение ссылки — это от того, что установленные свойства ссылки для всего сайта влияют и на данную ссылку.

Задать цвет ссылки через стили на странице

Для того, чтобы показать данный пример, придется сделать стили и присвоить ссылке класс : class=»example_1″ , иначе опять где-то с чем-то будет конфликтовать. см. пункт 2 на отдельной странице

Результат : цвет ссылки через style на странице

Задать цвет ссылки через стили через файл css

3). Для того, чтобы задать цвет через файл ссы, анм понадобятся знания как создать файл css и потом прикрепить его к странице.

В основном везде пользуются именно этим способом!

Если мы выведем здесь вот такой код? то увидим стили прописанные через файл css:

border-bottom: 1px solid #b3b3b3;

border-bottom: 1px solid #b3b3b300;

Цвет ссылки при наведении

Не будем очень подробно касаться темы изменения ссылки при наведении, мы уже это делали на странице hover.

Лишь давайте сделаем быстрый пример, для того стиля. Что мы описали сверху и присвоим ему эффект при наведении на ссылку.

Берем тот же код, что шел выше добавляем ему «:hover» и в строке «color» — поставим, ну например красный.

Цвет ссылки посещенной

Ну и собственно тоже самое, что и с верхнем кодом, изменяем вместо hover поставим «visited»

убрать синий цвет ссылки css

Как убрать синий цвет ссылки css!? Для того, чтобы убрать синий цвет ссылки нужно задать ему любой другой цвет, либо через стили в теге, либо через css стили на странице, либо в файле css!

Как удалить эффекты ссылки css

Если вам требуется удалить/убрать/исправить эффекты ссылки при наведении(hover) вам потребуется:

Находим ту ссылку на которой хотим редактировать эффекты при наведении.

Наводим мышку на вашу ссылку и нажимаем ПКМ — ищем строку исследовать элемент -нажимаем.

(возможно, что данный вариант сработает не с первого раза) — нужна некая сноровка. смайлы

Elements(данное окно должно выбраться автоматически).

Ссылка должна подсветиться автоматически.

Справа у вас должно быть дополнительное окно «styles»

В нём вы должны увидеть стили, которые отвечают за эффекты ссылки.

На скрине вы видите пример того, какие ссылки имеют эффект «hover». вы должны представлять какой эффект здесь вы хотите убрать. Если в приведенном примере убрать эффекты, то 3 вида ссылок изменят свои свойства!

И правее hover показан файл стилей, где данные эффекты находятся — «main.css»

Как найти файл с эффектами ссылки?

Как найти файл с эффектами ссылки, которые хотим удалить/убрать/исправить?

Если вы навдете на показанный файл стилей мышкой, то сработает эффект «hover» и вы увидите ссылку на данный файл.

Справа вы видите число — которое указывает на строку в которой данные стили расположены:

Открываем в любом редакторе кода

Источник