Path in CSS
With CSS, the path can be styled very differently.
Style the path
The path is styled using features like color, font-family, background…
a {
color : hotpink ;
}
In addition, the path is also styled differently depending on their status.There are 4 states of the path, including:
- a: link - the normal path has not been accessed by the user
- a: visited - the link has been accessed by the user
- a: hover - the link that the user hovered over
- a: active - when clicked
When styling the path according to the path state, it is necessary to follow some rules:
- a: hover must go after a: link and a: visited
- a: active must go after a: hover
Text Decoration
text-decoration
often used to remove underscores from paths.
a:link {
text-decoration : none ;
}
a:visited {
text-decoration : none ;
}
a:hover {
text-decoration : underline ;
}
a:active {
text-decoration : underline ;
}
Background color
The background-color
is used to select the background color for the path.
a:link {
background-color : yellow ;
}
a:visited {
background-color : cyan ;
}
a:hover {
background-color : lightgreen ;
}
a:active {
background-color : hotpink ;
}
Advanced - click on the link button
Here is an advanced example of combining some CSS properties to display the path as a box / button.
a:link, a:visited {
background-color : #f44336 ;
color : white ;
padding : 14px 25px ;
text-align : center ;
text-decoration : none ;
display : inline-block ;
}
a:hover, a:active {
background-color : red ;
}
Previous post: Icon in CSS
The following article: List in CSS
4 ★ | 1 Vote
You should read it
- Warning: The YouTube URL shared on Facebook may be deceptive
- How to use linkstore.app to store and share links
- How to create symbolic links in Windows
- How to customize the link share on Facebook
- Hazards from shortened links and prevention
- Instructions for shortening links when sharing - 5 websites that help shorten the best links
- How to delete links in Excel
- The organization quickly links to IE7
May be interested
- How to change the default Download path on Windows?i want to change the default download path on my system to another path, from the old path c: usersmynamedownloads to c: downloads. can i stop windows 10 from using my username profile location by default? and if so, how to change the default download path on windows 10?
- How to Set Java Homedo you want to set java home? the variable java home, generally written as java_home, is set to the install path of java. learning how to set java_home in windows and linux isn't hard to do. assuming that the path for the java development...
- Change the path to save screenshots on Windows 10this article, i will guide you to change default screenshot saving path on windows 10, you can save screenshots anywhere.
- How to display the full path in File Explorer on Windows 10in this tutorial, tipsmake.com will guide you through the steps to display the actual full path for the current location in the file explorer title bar on windows 10.
- Photoshop's new Pen Tool makes it easier to draw curvesif you've ever worked with photoshop, you'll probably find it difficult to draw or select curves (curved path). now adobe has come up with a better solution in the photoshop update.
- How to Find a File's Path on Windowsthis wikihow teaches you how to find the full path to a file using windows search, file explorer, or the run command window. press . this opens the search bar.
- Learn about URLsyou must have heard of the url but don't know exactly what it is, how the structure is and what the composition is. this article will therefore give you an overview of the url and its structure.
- Strangely the road disappears twice a day on the Atlantic coastconnecting the two archipelagos of the atlantic coast of france, this bizarre path disappears twice a day, leaving many people curious and interested. perhaps there is some mysterious supernatural force that has caused this strange phenomenon.
- Why do you always feel the way back is shorter than the road?almost everyone has this feeling: we all see that the return path is always shorter than the path though the distance does not change or change insignificantly. why so?
- 5 ways to fix The network path was not found (Error code: 0x80070035)the following article will show you 5 ways to fix the network path was not found (error code: 0x80070035). stay tuned!