Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Standard Link Styles in CSS
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.
Syntax
a:link { property: value; }
a:visited { property: value; }
a:hover { property: value; }
a:active { property: value; }
Standard Link
The following example illustrates 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="/jdbc/images/jdbc-mini-logo.jpg"></a>
</body>
</html>
The page displays a centered "Learn JDBC" heading with two links below it. The first link shows "Click here" in standard blue color with underline. The second link contains text and an image, also with standard link styling.
Non-standard Link
We can customize link appearance by removing default text decoration and applying custom styles −
<!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>
A table with four cells is displayed. Cell 1 contains a black link with no underline (non-standard), cell 2 contains an italic link with coral box shadow, and cells 3-4 contain standard blue underlined links.
Manipulate Links with CSS Pseudo-classes
When we create a link using the <a> element, various pseudo classes are used to set the link color, visited link color, hover, active link, etc. Here's how to use pseudo-classes −
a:link {
color: rgb(17, 0, 255);
}
a:visited {
color: rgb(128, 0, 107);
}
a:hover {
color: rgb(255, 105, 243);
}
a:active {
color: rgb(255, 153, 0);
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
a {
font-size: 18px;
font-weight: bold;
}
a:link {
color: rgb(17, 0, 255);
}
a:visited {
color: rgb(128, 0, 107);
}
a:hover {
color: rgb(255, 105, 243);
}
a:active {
color: rgb(255, 153, 0);
}
</style>
</head>
<body>
<h1>Pseudo class example</h1>
<a href="#">This is some sample link text</a>
<h2>Hover, click on the above link to see the pseudo class in action</h2>
</body>
</html>
The page shows "Pseudo class example" as heading with a link below it. The link appears in blue initially, changes to pink when hovered, orange when clicked, and purple after being visited.
Conclusion
CSS pseudo-classes provide powerful control over link appearance and behavior. Remember to follow the correct order (:link, :visited, :hover, :active) for proper functionality and maintain good user experience with distinguishable link states.
533 Views
