Links can be decorated using CSS. You can style the different states of a link using the following pseudo-classes:
:link- selects unvisited links:visited- selects visited links:hover- selects links when the mouse cursor is over them:active- selects links when they are clicked or tapped
The default colors for links in CSS depend on the user agent (web browser) and operating system being used. However, as a general guide, the default colors for links in CSS per pseudo-class are:
:link- blue:visited- purple:hover- blue:active- red
It's important to note that these defaults can be overridden using CSS, and it's good practice to style links to ensure they are easily distinguishable from other text and elements on the page.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<a href="http://google.com">Google</a>
</body>
</html>
Our page with one link to Google.
a:link {
color: orange;
}
a:visited {
color: red;
}
a:hover {
background: red;
color: white;
}
This code styles links in three different states using CSS pseudo-classes. Here's what each declaration does:
a:link- Sets the color of unvisited links to orange.a:visited- Sets the color of visited links to red.a:hover- Sets the background color of links when the mouse cursor is over them to red, and sets the color of the link text to white.
So when a user visits the page, all links will appear as orange until they are clicked. Once clicked, the link will appear as red. When the user hovers their mouse over any link, the background of the link will turn red and the text color will change to white. This helps to give the user visual feedback and make the links more interactive.
a:link {
color: orange;
}
a:active {
color: yellow;
background: black;
}
a:visited {
color: red;
}
a:hover {
background: red;
color: white;
}
This code styles links in four different states using CSS pseudo-classes. Here's what each declaration does:
a:link- Sets the color of unvisited links to orange.a:active- Sets the color of links when they are clicked to yellow and sets the background color of the link to black.a:visited- Sets the color of visited links to red.a:hover- Sets the background color of links when the mouse cursor is over them to red, and sets the color of the link text to white.
So when a user visits the page, all links will appear as orange until they are clicked. Once clicked, the link will appear as yellow with a black background. When the user hovers their mouse over any link, the background of the link will turn red and the text color will change to white. Visited links will appear as red.
This code uses different colors and backgrounds for each of the link states, which can help users navigate the website more easily and provide visual feedback when interacting with links.
No comments:
Post a Comment