Example 1
Open your HTML file to create links. For styling these links, we will create our CSS file. We are using the visual code studio to perform these examples. So, we create the HTML file, and the HTML code is also given here. After completing the code, save it with the “.html” extension.
In the previous HTML code, we create three different links. The first link we have created is the “google” link, the second link is the “yahoo” link, and the last link is the “firefox” link. We will also style these links in CSS. This HTML file is here for just creating these links. Now, move to the following CSS file, and see how to style these links.
CSS Code
In the previous image, we use the “: active” selector, which we use to give style to that link. When the user presses this link, the link’s background color turns “yellow”. Then we have the “: link” selector, which styles the link that is not visited and changes the color of the unvisited link to “blue”. It will appear “blue” on the screen. After this, we use the “: visited” selector, and this visited selector changes the color of the visited link to “purple”. Finally, we have the “: hover” selector in which we change the color of the link to a “red” color when the cursor moves over the link. When you move your mouse on these links, the color of these links changes to “red”. In this example, we changed the color of the link when you hover on it and visit the link or the color of the unvisited link.
Output
You can see three links in the previous image. The first two links are color “purple”, so it means these two links are visited. The third link’s color is “blue”, meaning this third link is not visited as we set these colors in the CSS code for the visited and unvisited links. When we hover on any link, its color turns to a “red” color. When we click on any link, the color of the link’s background will appear “yellow”. When we click on the first google link, the google page will appear on the screen, as shown in the following image:
Example 2
This is another example where we create a link between the paragraph and give styles to this link in CSS. Let’s see how the link is active in between the paragraphs.
In the previous image, you can see that we have created a paragraph using HTML and added a link in between the paragraph. We will use CSS in this example to change the link’s and paragraph’s color.
CSS Code
In the previous CSS file, you can see that we changed the color of the link to “blue” inside the curly braces of “: link”, so this link will appear blue between paragraphs. Then, we use a “red” color for the visited link. For “hover”, we select the background color as “yellow”. The “active” color of the link is set as “purple”, and the active paragraph color is designated as “#eee” color. So, when the link is active, it changes the link’s color as well as the background color of the paragraph.
Output
In this first output, you can see that the link’s color in the paragraph appears “blue” as we set it as “blue” in our CSS file.
In the second output, the color of the link turns to “red”, which means we have visited the link here, so its color is changed from “blue” to “red”.
Example 3
In this third example, we will change the link’s font size, font style, and colors using CSS. For this, we have to create different links in HTML.
In the previous HTML, we have created five different links using the different classes inside the “<a>”. We give the name of the class as “link1”, “link2”, “link3”, “link4”, and “link5”. We use these names to change the style of the link.
CSS Code
We use the “link1” name of the class and apply the style on this first link. The first link appears “red” when it is “active”. Then, we change the “font-size” of the second link. When we hover over this link, the size of this link increases to “150%”. We set the “background-color” of the third link to “red”, so the background color becomes “red” when we hover over the third link. We change the font style of the fourth link by utilizing the “font-family” property. We use the “text-decoration” in the fifth link and set it to “underline”. The output is shown.
Output
This output changes its color when we hover over the first link. When we hover over the second link, its font size changes. When it comes to the third link, its background color changes. The font style changes to “monospace” when you hover over the fourth link.
Example 4
In this example, we will create two link buttons with links inside the buttons. In the first button, we place the link of “Gmail”. Inside the second button, we put the link of “Facebook”. So, when you click on button one, it will open the Gmail page. When you click the second button, it will open the Facebook page. Now, we also want to apply the style of these links.
When this link is active, the color of this link appears “red” as we place the “color: red” inside the curly braces of the “: active” selector. When we hover over this link, which is inside the button, the color of the button turns “pink” as we set this color in the CSS file. After visiting these links, the color will be “blue”, and the color of the button’s background will be “white”.
Output
The previous output shows two link buttons in which we have two different links, and you can see that the color of both links is “blue”, meaning both links are visited.
Conclusion
We have learned about the “Active link” in this guide. We have applied different styling on different links using the CSS properties. We have performed four various examples here as we know that the link is active when pressed. Here, we have changed the style of the active link, the font size of the link when we hover over it, and the color after visiting the link. We used different colors for the visited and unvisited links in this guide. We have learned to style these active links in CSS in detail.
