CSS Links
CSS links allow you to style hyperlinks (<a> tags) on your web page. You can customize how links look in different states, such as when they are hovered over, visited, or active. This helps make your web page more interactive and visually appealing.
1. Basic Link States
Links can have different states that you can style individually:
• a:link: Styles an unvisited link.
• a:visited: Styles a visited link (a link the user has already clicked).
• a:hover: Styles a link when the user hovers over it with a mouse.
• a:active: Styles a link at the moment it is clicked.
2. Example of Basic Link Styling
Output and Explanation of the Example
1. a:link { color: blue; text-decoration: none; }
• Explanation: Sets the default color of an unvisited link to blue and removes the underline.
2. a:visited { color: purple; }
• Explanation: Changes the color of the link to purple after it has been clicked.
3. a:hover { color: red; text-decoration: underline; }
• Explanation: When the user hovers over the link, the color changes to red, and the underline reappears.
4. a:active { color: orange; }
• Explanation: The link turns orange when it is clicked.
3. Advanced Link Styling
You can also add more advanced styles to links, such as background colors, borders, or transitions.
1) Adding a Background Color on Hover:
Example:
<head>
<style>
a:hover {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS Link Styling Example</h1>
<p><a href=”#”>Visit Iqra Technology</a></p>
</body>
Output:
In this example:
• background-color: yellow;: When the user hovers over the link, the background color of the link changes to yellow. This is a common visual effect used to indicate interactivity.
2) Adding a Border on Hover:
Example:
<head>
<style>
a:hover {
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<h1>CSS Link Styling Example</h1>
<p><a href=”#”>Visit Iqra Technology</a></p>
</body>
Output:
In this example:
• border-bottom: 2px solid red;: When the user hovers over the link, a 2-pixel thick solid red border appears at the bottom of the link. This creates an underlying effect that emphasizes the link’s interactivity.
3) Using Transition for Smooth Effects:
Example:
<head>
<style>
a {
transition: color 0.3s ease, background-color 0.3s ease;
}
a:hover {
color: white;
background-color: green;
}
</style>
</head>
<body>
<h1>CSS Link Styling Example</h1>
<p><a href=”#”>Visit Iqra Technology</a></p>
</body>
Output:
In this example:
• a{transition: color 0.3s ease, background-color 0.3s ease;}: This property applies a transition effect to the link. The transition will smoothly change the color and background-color properties over 0.3 seconds when the link hovers. The ease keyword specifies that the transition should start slowly, speed up in the middle, and then slow down again at the end.
• a:hover:{color: white; background-color: green;}: Changes the link’s text color to white and the link’s background color to green when hovered.
4. Link Button Example
You can also style links to look like buttons:
Example:
<head>
<style>
a.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 5px;
}
a.button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<p><a href=”https://example.com” class=”button”>Click Me!</a></p>
</body>
Output:
In this example:
1. a.button:
• background-color: #4CAF50;: Sets the background color of the link to a shade of green.
• color: white;: Sets the text color to white.
• padding: 10px 20px;: Adds 10 pixels of padding on the top and bottom, and 20 pixels on the left and right, giving the link some spacing around the text to look like a button.
• text-align: center;: Centers the text inside the link.
• text-decoration: none;: Removes the default underline from the link, making it look more like a button.
• display: inline-block;: Allows the element to have padding and behave like a block element while still being inline, meaning it won’t take up the full width of the parent element.
• border-radius: 5px;: Rounds the corners of the link, giving it a smooth, button-like appearance.
2. a.button:hover:
• background-color: #45a049;: Changes the background color to a slightly darker green when the user hovers over the button, creating a hover effect that visually indicates interactivity.
5. Priority of Link Styles
The order in which you write your CSS selectors matters when styling links. Follow this order to avoid conflicts:
1. a:link (unvisited link)
2. a:visited (visited link)
3. a:hover (hovered link)
4. a:active (active link)
If you don’t follow this order, some styles might not be applied as expected.
Summary
• Basic Link States: Style links differently when they are unvisited, visited, hovered, or active.
• Advanced Styling: Use background colors, borders, and transitions for more interactive link designs.
• Link Buttons: Convert links into button-like elements for better visual emphasis.
• Styling Order: Always style links in the order: link, visited, hover, active, to ensure proper application of styles.
CSS link styling provides flexibility in how links are presented, enhancing user experience and visual consistency across your website.
Course Video
YouTube Reference :
1) CSS Links in Hindi/Urdu
Practice Scenarios
Scenario 1: Basic Link Styling
Objective: Style a basic hyperlink with color and text-decoration.
Expected Output: Links with custom colors and no underline.
<!DOCTYPE html>
<html>
<head>
<title>Basic Link Styling</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
<body>
<a href=”#”>This is a styled link</a><br>
<a href=”#” class=”custom-link”>This is another styled link</a>
</body>
</html>
CSS Code
a {
color: #1E90FF; /* DodgerBlue color for links */
text-decoration: none; /* Remove underline */
}
a:hover {
color: #FF4500; /* Change color on hover to OrangeRed */
}
.custom-link {
color: #32CD32; /* LimeGreen color for the custom link */
text-decoration: underline; /* Add underline */
}
.custom-link:hover {
color: #FF6347; /* Change color on hover to Tomato */
}
Output:
Normal
Hover on first link
Hover on second link
Scenario 2: Styling Visited and Active Links
Objective: Style links differently when they are visited or active.
Expected Output: Links change color after being visited and when active.
Output:
Normal
Visited link
Active link
Scenario 3: Button-Like Links
Objective: Style links differently when they are visited or active.
Expected Output: Links change color after being visited and when active.
Output:
Normal
Hover on first Button
Hover on second button
Scenario 4: Navigation Menu Styling
Objective: Style a horizontal navigation menu using links.
Expected Output: A navigation bar with styled links, including hover effects.
Output:
Normal
Hover on first Button
Hover on second button
Scenario 5: Underlined and Overlined Links
Objective: Add both underline and overline to links.
Expected Output: Links with underline and overline effects.
Output:
Normal
Hover on first Button
Scenario 6: Text Decoration Styles
Objective: Add both underline and overline to links.
Expected Output: Links with underline and overline effects.
Output:
