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
<!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
<!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>Output
This gives the following output −
As we click "2" we get the following output
