A link is a connection from one web page to another, and CSS can style links in various ways through different attributes.
1. Link style
Links are an important part of a website. You can see many links on almost every web page. Reasonable design of link styles can add points to the appearance of the web page. Links have four different states, namely link, visited, active and hover. You can set different styles for the four states of the link through the following pseudo-class selectors:
(1) a: link => This is a normal, unvisited link.
(2) a: visited => This is a link that the user has visited at least once
(3) a:hover => when the mouse hovers over it, it is a link
(4) a: active => This is a link that was just clicked.
grammar:
a:link{color:color_name;}color_name can be in any format, such as a color name (green), a hexadecimal value (#5570f0), or an RGB value - rgb(25, 255, 2). There is another state "a:focus" which is used to focus when the user uses the tab key to browse a link.
Default value for link:
(1) By default, links created are underlined.
(2) When the mouse hovers over the link, it will change to a hand icon.
(3) Normal/unvisited links are blue.
(4) Visited links are colored purple.
(5 ) Active links are red.
(6) When a link is focused, it has an outline around it.
For example:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>CSSlinks</title><style>p{font-size:25px;text-align:center;}</style></head ><body><p><ahref=https://www.dotcpp.com/>Simple link</a></p></body></html>The results displayed are as follows:
2. How to set the link style with CSS?
Here are some basic CSS properties for links:
(1) color attribute
This CSS property is used to change the color of the link text.
grammar:
a{color:color_name;}(2) font-family attribute
This property is used to change the font type of the link using the font-family property.
grammar:
a{font-family:familyname;}(3) text-decoration attribute
This attribute is mainly used to remove or add underlines and other modifications to links.
grammar:
a{text-decoration:none;}Example:
<style>/*Set the font size to improve visibility*/p{font-size:2rem;}/*Remove underlines using the text-decoration attribute*/a{text-decoration:none;}/*You can also use the following styles , add underline text-decoration:underline;*/</style>(4) background-color attribute
This property is used to set the background color of the link.
grammar:
a{background-color:color_name;}