Standard Link Styles in CSS

CSS Web Development Front End Technology

We can style links as per our requirements. It is recommended that links have styles which distinguish them from normal text. The default link styles for different link states is as follows −

Link State	Color
Active	#EE0000
Focus	#5E9ED6 or a similar shade of blue outline in case of Windows and Mac, #F07746 outline for Linux while text color remains the same
Hover	#0000EE
Link	#0000EE
Visited	#551A8B

Note − The above colors may change with newer versions of browsers. For proper functionality, the order of pseudo selectors is given by:- :link, :visited, :hover, :active.

Example

The following examples illustrate standard link styles

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
* {
   text-align: center;
}
</style>
</head>
<body>
<h2>Learn JDBC</h2>
<a href="">Click here</a>
<br/><br/>
<a href="#">And here <img src="https://www.tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg"></a>
</body>
</html>

Output

This gives the following output −

The active state of link is shown in the following output −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
#one {
   color: black;
   text-decoration: none;
}
#two {
   font-style: italic;
   box-shadow: inset 0 0 8px coral;
}
table, td {
   font-size: 1.4em;
   padding: 8px;
   text-align: center;
   border: thin solid;
}
</style>
</head>
<body>
<table>
<tr>
<td><a id="one" href="#">1</a>(non standard link)</td>
<td id="two"><a href="#">2</a></td>
</tr>
<tr>
<td><a href="">3</a></td>
<td><a href="#">4</a></td>
</tr>
</table>
</body>
</html>