CSS Links

CSS Links

We can add links using anchor tag which is represented as <a>__</a>

Syntax-

We specify the final destination of link in the href attribute and target is use to specify weather the targeted page will open in new page of in the same page -

Now we will see example -
Example -

Output-

In addition to this we can also identify what is the state of the link using the following links -

1. a:link - Applies to any links which haven't been visited by the user.

2. a:visited - Applies to any links which have has been visited by the user.

3. a:hover - a link when the user mouses over it

4. a:active - after the link is clicked

Now we will see Example -

Example -

<!DOCTYPE html>
<html lang="en">
<style>
/* for universal links*/
a:link {
color: violet;
}

/* visited link */
a:visited {
color: blue;
}

/* mouse over link */
a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: red;
}
</style>

<head>
<link rel="stylesheet" href="sample.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<title>Document</title>
</head>
<body>

<h1 class="one">link to goole.com</h1>
<p><b><a href="https://www.facebook.com/" target="_blank">CLICK HERE TO GO TO GOOGLE</a></b></p>

</body>

</html>

Output

After clicking link