ADVERTISEMENT

HTML Anchors Link Style Using CSS

Telegram Group Join Now

ADVERTISEMENT

HTML Anchors Link Style Using CSS

HTML Anchors Link Style Using CSS
HTML Anchors Link Style Using CSS

 

ADVERTISEMENT

ADVERTISEMENT

In CSS, we can style links by changing their properties (color, background-color, text-decoration, etc.)

Link By default:

ADVERTISEMENT

  • links are underlined
  • unvisited links are blue
  • visited links are purple
  • hovering a link makes the mouse a little hand icon
  • focused links have an outline around them
  • active links are red

With CSS, of course we can change those properties or style them.

ADVERTISEMENT

Styling Links With CSS

Before we can start styling links we first need to understand the concept of link states.

Link States

ADVERTISEMENT

Link states are different states that a link that can exist in which can be styled using pseudo-classes.

  • Link (unvisited): pseudo-class is :link; the default state, it isn’t in any other state
  • Visited: pseudo-class is :visited; a visited link (exists in browser’s history)
  • Hover: pseudo-class is :hover; a link that is being hovered (mouse over)
  • Focus: pseudo-class is :focus ; a link when it is being focused e.g. focused by pressing the Tab key
  • Active: pseudo-class is :active ; a link when it is being activated or clicked on
    Link’s Text Decoration

You may want to change or remove a link’s text-decoration which is an underline by default.

Create A Travel Website Using HTML & CSS

ADVERTISEMENT

We can achieve it by using the text-decoration CSS property.

ADVERTISEMENT

a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}

Change Link’s Background Color

You may want to add a link’s background color.

We can achieve it by using the background-color CSS property.

a:link {
background-color: lightgreen;
}
a:visited {
background-color: lightgreen;
}

Adding Icons to Links

It’s a good idea to add icons to links. For example, if the link will open in a new tab.

ADVERTISEMENT

Restaurant Website Using HTML and CSS

ADVERTISEMENT

<!DOCTYPE html>
<html>
<head>
<title> Try It Yourself </title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>
<body>
<p> Go to <a href="http://www.example.com">Example.com<i class="material-icons">launch</i></a>. </p>
<p><b> Note! </b> This demo requires internet connection. </p>
</body>
</html>

Output Of Icon

ADVERTISEMENT

HTML Anchors Link Style Using CSS
HTML Anchors Link Style Using CSS

Styling Links in CSS Advanced

ADVERTISEMENT

Here is an example of an advanced way of styling links in CSS: adding borders and padding etc.

ADVERTISEMENT

Note: In the CSS definition, the :hover pseudo-class should come after the :link and :visited pseudo-classes. And the :active pseudo-class must come after the :hover pseudo-class.

a {
outline: none;
text-decoration: none;
font-family: sans-serif;
}
a:link {
color: black;
}
a:visited {
background: lightgrey;
}
a:focus {
border: 1px solid red;
background: lightgrey;
}
a:hover {
border: 1px solid #f8f9f9;
background: #173459;
color: white;
}
a:active {
text-decoration: underline;
border: 1px solid lightgrey;
background: #d9534f;
color: white;
}

Was that link not looking good? Yes, maybe!

So I challenge you to style it yourself and be creative.

Tic Tac Toe Game Using HTML,CSS and JavaScript

You can try experimenting by changing the colors and backgrounds.

Thanks For Reading!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT