How do i style text in a link in css?


With CSS, links can be styled in many different ways.


Text Link Text Link Link Button Link Button


Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

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;
}

Try it Yourself »

When setting the style for several link states, there are some order rules:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover


Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Example

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

Try it Yourself »


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;
}

Try it Yourself »


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;
}

Try it Yourself »


More Examples

Example

This example demonstrates how to add other styles to hyperlinks:

a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}

a.two:link {color: #ff0000;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}

a.three:link {color: #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}

a.four:link {color: #ff0000;}
a.four:visited {color: #0000ff;}
a.four:hover {font-family: monospace;}

a.five:link {color: #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; text-decoration: none;}
a.five:hover {text-decoration: underline;}

Try it Yourself »

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;
}

Try it Yourself »

Example

This example demonstrates the different types of cursors (can be useful for links):

auto

crosshair

default

e-resize

help

move

n-resize

ne-resize

nw-resize

pointer

progress

s-resize

se-resize

sw-resize

text

w-resize

wait

Try it Yourself »


Test Yourself With Exercises

Exercise:

Set the color of links to "red".




  

This is a heading

This is a paragraph

This is a link

Start the Exercise



Links can be styled with any CSS property (e.g. color , font-family , background , etc.)..
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..
“how to set link as normal text in html” Code Answer.
You can make a link look like normal text by setting color and removing text underline and even change the cursor..
color: black;.
text-decoration: none;.
cursor: auto;.
Use the textContent property to change the text of a link element, e.g. link. textContent = 'Replacement link text' . The textContent property will set the text of the link to the provided string, replacing any of the existing content. Here is the HTML for the examples in this article.