CSS Links

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; }

a-link

• Explanation: Sets the default color of an unvisited link to blue and removes the underline.

2. a:visited { color: purple; }

a-visited

• Explanation: Changes the color of the link to purple after it has been clicked.

3. a:hover { color: red; text-decoration: underline; }

a-hover

• 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:
Adding-a-Background-Color-on-Hover
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

Basic-Link-Styling-normal

Hover on first link

Basic-Link-Styling-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

Styling-Visited-and-Active-Links-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

Button-Like-Links-normal

Hover on first Button

Button-Like-Links-Hover-on-first-Button

Hover on second button

Button-Like-Links-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

Navigation-Menu-Styling-normal

Hover on first Button

Hover on second button

Navigation-Menu-Styling-About-link-is-active

Scenario 5: Underlined and Overlined Links

Objective: Add both underline and overline to links.
Expected Output: Links with underline and overline effects.

Output:

Normal

Underlined-and-Overlined-Links-normal

Hover on first Button

Underlined-and-Overlined-Links-On-Hover

Scenario 6: Text Decoration Styles

Objective: Add both underline and overline to links.
Expected Output: Links with underline and overline effects.

Output:
Text-Decoration-Styles