Links in CSS

Links in CSS

Links-in-CSS

CSS Links

Through CSS, we can give different styles of links. Such as text-color, background-color, border, font-family, etc.

For example

<style>

a {

color: # 000000;

text-decoration: none;

border: 1px solid green;

padding: 20px;

}

</ style>

<a href="#"> Click </a>

text-decoration: - This property is used to remove the underline of links generally.

There may be some other values ​​of text-decoration, such as -

text-decoration: overline;

text-decoration: underline;

When we have to underline or overline, we give value 'none' of text-decoration.

* In which state no link is located, on this basis, we can give it a style.

The link has four states -

a: link: - Normal link, which has not been visited.

a: visited: - Links that have been visited.

a: hover: - This is the state of the link when it has a mouse cursor.

a: active: - This is the state of the link when it is clicked.

We can apply a style to different states of a link.

For example

a: link {

color: green;

}

As long as the link is not visited, its color will remain green.

a: visited {

color: blue;

}

With this, when the link is visited, its color will be changed to blue.

a: hover {

color: red;

}

This will move the mouse cursor to the link when its color becomes red.

a: active {

color: purple;

text-decoration: overline;

}

With this, when a link is in an active state, its color will be purple and it will have an overline on it. In the example below, we are applying various properties of CSS to a link.

a: link, a: visited {

color: blue;

background-color: transparent;

border: 1px solid black;

text-align: center;

text-decoration: none;

padding: 12px 20px;

}

a: hover, a: active {

background-color: red;

color: yellow;
}