Style Links in CSS

We all know that links are very important to add in all HTML pages. But sometimes we wanna to make some links unique from other links. Like this:

This is a Link

This is also a Link

This one is also a Link

And this one is also a link

That’s why today we will learn how to use CSS to style your links!

Styling Links

HTML Links can be styled using the CSS Properties, like color, background-color, text-decoration, padding etc.

**Change color of Links**

To change the color of links, we can use the CSS color property. Here is the syntax:

a {
  color: green;
}

Now in a below example, let’s add this code in our html, and see how the color of a link changes.

Example

<html>
<head>
<style>
a {
 color : green;
}
</style>
</head>
<body>
<a href="https://crus4.com/create-a-link-in-html/"> This is a styled link </a>
</body>
</html>

Copy the Code and Run it Here

We can also style links based on their state. There are four link states in CSS. These are:

Normal State ( a: link ):- A default state of a hyperlink. It is mainly displayed as underlined blue text.
Visited State ( a: visited ):- Represents a link, that the user has already visited.
Hover State ( a: hover ):- This state of link is activated, when the user mouses over it.
Active State (a : active ):- This state of a link is activated, when the user clicks on it.

Here we will write a code and see how the color of a link changes, when the user clicks on it.

Example

<html>
<head>
<style>
a:link {
  color: red;
}
a:visited {
  color: green;
}

</style>
</head>
<body>
<a href="https://crus4.com/" target="_blank"> Click on this link </a>
</body>
</html>

Copy the Code and Run it Here

Run this code on our HTML Editor. After you return from visiting the link mentioned there, the color of the link will have changed.

We can also add hover and active effects to our links. Here’s an example:

Example

<html>
<head>
<style>
a:link {
  color: red;
}
a:visited {
  color: green;
}
a:hover {
  color: dodgerblue;
}
a:active {
  color: yellow;
}
</style>
</head>
<body>
<a href="https://crus4.com/" target="_blank"> Click on this link </a>
</body>
</html>

Copy the Code and Run it Here

Run this code on our HTML Editor. When you put your mouse over the link, it’s color will change to dodgerblue, and the moment when you click on that link it’s color will change to yellow.

Links – Text Decoration

The text decoration of links can be controlled with the help of CSS text-decoration property. The text-decoration property can take the following values:

none:- Removes all the text decorations (Default)
underline:- Adds a line below the text.
overline:- Adds a line above the text.
line-through:- Adds a through the text.
blink:- Adds a blinking effect to the text.

In an example below, let’s write a code and apply text decoration to a link.

Example

<html>
<head>
<style>
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: overline;
}
a:hover {
  text-decoration: line-through;
}
a:active {
  text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://crus4.com/" target="_blank"> This is a Link </a>
</body>
</html>

Copy the Code and Run it Here

Run this code on our HTML Editor, and see how the link decoration changes when you mouse over the link or click on it.

Set Background Color of a Link

CSS background-color property is used to set the background color to the links. Here is how we can add background-color to the HTML Links.

Example

<html>
<head>
<style>
a:link {
  background-color: powderblue;
}
a:visited {
  background-color: blue;
}
a:hover {
  background-color: yellow;
}
a:active {
  background-color: green;
}
</style>
</head>
<body>
<a href="https://crus4.com/css" target="_blank"> This is a Link </a>
</body>
</html>

Copy the Code and Run it Here

Links as Buttons

We can style Links to look like buttons using the several CSS Properties. Here is an example:

Example

<html>
<head>
<style>
a:link, a:visited {
  background-color: crimson;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: blue;
}

</style>
</head>
<body>
<a href="https://crus4.com/css" target="_blank"> This is a Link </a>
</body>
</html>

Copy the Code and Run it Here

Run this code on our HTML Editor, and see how the link displays as a button.

CSS- Font Weight of a Link Text

The CSS font-weight property, is used to set the weight of the link’s text. We can set it’s value as bold, italic etc.

In an example below, let’s write a code to set the weight of link’s text.

Example

<html>
<head>
<style>
a {
  font-weight: bold;
}

</style>
</head>
<body>
<a href="https://crus4.com/css" target="_blank"> This is a Link </a>
</body>
</html>

Copy the Code and Run it Here

In an above example, we set the font-weight of the link as bold, now the link text “This is a Link” will be displayed in bold.

CSS – Padding of a Link

Here the CSS padding property is used to set the Padding of the link. The padding property is used to create a space around a link text.

In an example below, let’s write a code to set the padding of a link text.

Example

<html>
<head>
<style>
a {
  padding: 10px;
}
</style>
</head>
<body>
<a href="https://crus4.com/css" target="_blank"> This is a Link </a>
</body>
</html>

Copy the Code and Run it Here

In an above example, we have set a padding of 10 pixels to all a tags, which will create space around the link text. Moreover, we can also set different padding values for the top, right, bottom, and left sides of the link, using the padding-top, padding-right, padding-bottom, and padding-left properties. Here is an example:

Example

<html>
<head>
<style>
a {
  padding-top: 50px;
  padding-right: 100px;
  padding-bottom: 50px;
  padding-left: 100px;
}

</style>
</head>
<body>
<a href="https://crus4.com/css" target="_blank"> This is a Link </a>
</body>
</html>

Copy the Code and Run it Here

In an above example, we have set different padding values for top, right, bottom and left sides of the link. This will set a top and bottom padding of 50 pixels and a right and left padding of 100 pixels to all a tags.

CSS – Set Border of a Link

We can add border to a link using the CSS border property. Here is an example:

Example

<html>
<head>
<style>
a {
  border: 2px solid black;
}
</style>
</head>
<body>
<a href="https://crus4.com/css" target="_blank"> This is a Link </a>
</body>
</html>

Copy the Code and Run it Here

In an above example, we have set a border of 2 pixel width, solid style, and black color to all a tags, which will create a border around the link.

Previous

Next

Share This Post!

Style Links in CSS