Html font link colours

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.

  Источник

  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.

  Источник

  Читайте также:  Javascript do after time