Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display a link using only CSS?
To disable the link of any website, we use the properties of CSS like pointer-event set to none, and then the cursor can be set to default which will disable the active link and the users cannot access the links. Sometimes the link has to be disabled to bring some updates or security to the website. The government or organization is the best suited for this example, whenever they need any updation required in the backend of the website they simply disable the link.
In this article, we will display how to display a link using only CSS.
Syntax
<a href="link_of_any_website" class="class_name"></a>
This is an anchor tag used to represent the link of the sites. The class_name is an attribute used to define the CSS properties of the specific elements.
Properties used
The following properties used in the example are −
color − Define the color of the text.
opacity − Define the transparency level of the text or image in HTML.
text-decoration − Define the decoration added to the text like underline, overline, line-through, underline overline, and none.
pointer-event − Define how the element responds to the event. For example- whether the link is active or not active.
cursor − Define the movement of the mouse when pointing over to any link.
font-weight − Define the text weight be thin or thick.
Example
In this example, we use the two classes whose names are active and not-active. The non-active class set the property named pointer-event which will disable the link that is used in the anchor element but in the active class, the link is enabled.
<!DOCTYPE html>
<html>
<title>Tutorialspoint</title>
<head>
<style>
h1{
color: darkgreen;
}
.not-active{
opacity: 0.6;
text-decoration: none;
pointer-events: none;
cursor: default;
color: blue;
font-weight: bold;
}
.active{
opacity: 0.6;
text-decoration: none;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<center>
<h1>Tutorialspoint</h1>
<h3 style="color: green">(www.tutorialspoint.com)</h3>
<p>The Disable link:
<a href="https://www.tutorialspoint.com" class="not-active">Click Here</a>
</p>
<p>The Enable link:
<a href="https://www.tutorialspoint.com" class="active">Click Here</a>
</p>
</center>
</body>
</html>
Conclusion
We understood the difference between disabling and enabling a link in CSS by using some properties of its. To disable the link, we have set the value to none for some properties of the class named not-active like pointer and text-decoration. Therefore, this way the link is disabled only using CSS.
144 Views
