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
Selected Reading
How to display a link using only CSS?
To display a link using CSS, we can style anchor elements with various properties to control their appearance and behavior. CSS allows us to customize how links look, whether they appear active or disabled, and how users interact with them.
Syntax
a {
color: value;
text-decoration: value;
pointer-events: value;
cursor: value;
}
Properties Used
The following CSS properties are commonly used to style links
| Property | Description |
|---|---|
color |
Defines the color of the link text |
text-decoration |
Controls underline, overline, or line-through effects |
pointer-events |
Controls whether the element responds to mouse events |
cursor |
Defines the cursor appearance when hovering over the link |
font-weight |
Controls the thickness of the text |
opacity |
Sets the transparency level of the element |
Example: Active and Disabled Links
This example demonstrates how to create both active and disabled links using CSS classes
<!DOCTYPE html>
<html>
<head>
<title>Link Display with CSS</title>
<style>
h1 {
color: darkgreen;
text-align: center;
}
.container {
text-align: center;
margin: 20px;
}
.active-link {
color: blue;
text-decoration: underline;
font-weight: bold;
opacity: 1;
}
.active-link:hover {
color: darkblue;
}
.disabled-link {
color: gray;
text-decoration: none;
pointer-events: none;
cursor: default;
opacity: 0.6;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>CSS Link Display Demo</h1>
<p>Active link:
<a href="https://www.tutorialspoint.com" class="active-link">Visit TutorialsPoint</a>
</p>
<p>Disabled link:
<a href="https://www.tutorialspoint.com" class="disabled-link">Disabled Link</a>
</p>
</div>
</body>
</html>
The page displays two links: an active blue underlined link that changes color on hover and responds to clicks, and a disabled gray link that appears faded and does not respond to mouse interactions.
Conclusion
CSS provides complete control over link appearance and behavior through properties like pointer-events, color, and text-decoration. By combining these properties, you can create both functional and disabled links to enhance user experience and website functionality.
Updated on: 2026-03-15T17:29:55+05:30
461 Views
Advertisements