How to Install Operating System ??Complete Guide Installing The Operating System

How To Manage Links With CSS

In this article we discuss how to manage Links in CSS, As we know linking tags in HTML is “a” which has anchor extensions, by default HTML has made the link interesting, but we are making changes to set links with CSS.

How to manage Links in CSS, Can the link be interesting and can be in accordance with the design we want, starting from when the mouse passes the link until after being visited, we can set the link with the CSS so that the link has different colors.

How To Manage Links With CSS
How To Manage Links With CSS

Before going forward, there are a number of articles that you might be looking for.

READ TOO :

How To Manage Links With CSS

To be able to set up a link with CSS, by using several pseudo-classes, this pseudo-class will be discussed in the next tutorial. The following is a pseudo-class table that can be used to set links with CSS.

PropertyInformation
:linkNormal link, when using the cursor or not, click on the link
:visitedThe visited pseudo-class will work if the link has clicked or has been visited
:hoverFunction: hover will be active if the mouse directs or passes the link
:activeThe pseudo-class: active will function if the link at the same time is clicked on by the cursor

From the pseudo-class table above we will discuss one by one in detail to simplify the CSS learning process about managing links with this CSS.

Below is the HTML source code for managing links with CSS, please practice it on your computer, then pay attention to more explanation.

<!DOCTYPE html>
<html>
<head>
     <title> Link </title>
     <style type = "text/css">
      a: link {
               color: red;
              }
      a: visited {
               color: yellow;
              }
      a: hover {
               color: blue;
              }
      a: active {
               color: black;
              }
      </style>
</head>
<body>
      <a href="#"> This is an example of a link </a>
</body>
</html>

If you have written the code above on your computer, please note the detailed explanation below.

Pseudo-class: link

The pseudo-classes link is useful if the link is idle, or the mouse cursor does not point towards the link, on the source code above the silent link has been given a red color.

Pseudo-class: visited

The visited pseudo-classes will be active when the link has been visited it will change according to the view that has been defined.

Pseudo-class: hover

In this hover pseudo-classes will function if the mouse cursor is directed without being clicked on the link, then the war will change according to what has been determined.

Pseudo-class: active

This active pseudo-classes will function if the link is clicked, to prove it please click and hold, then the color of the link will change simultaneously.

So the tutorial on how to set up links with this CSS, hopefully, can be useful and well practiced.

Before going forward, there are a number of articles that you might be looking for.

Read too :

Sending
User Review
0 (0 votes)

Add a Comment

Your email address will not be published. Required fields are marked *