• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Links

← Previous Next →

🔹 What Are CSS Links?

Links (<a> tags) can be styled using CSS to improve their appearance in different states — like normal, hovered, visited, active, or focused.

🔸 Link States in CSS

Pseudo-class Description
:link Unvisited link
:visited Visited link
:hover When mouse hovers over the link
:active When link is being clicked
:focus When the link is selected/focused via tab

Important: Use this order for best practice:
:link → :visited → :hover → :active

🔸 1. Basic Link Styling

a {
  color: blue;
  text-decoration: none;
}

🔸 2. Styling All States

a:link {
  color: green;
}

a:visited {
  color: purple;
}

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

a:active {
  color: orange;
}

🔸 3. Removing Underline

a {
  text-decoration: none;
}

To add it back on hover:

a:hover {
  text-decoration: underline;
}

🔸 4. Adding Hover Effects

a:hover {
  background-color: yellow;
  color: black;
}

🔸 5. Styling Buttons as Links

a.button {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
}

a.button:hover {
  background-color: #0056b3;
}

Practice Questions

Q1. Style unvisited links as green.

Q2. Set visited link color to purple.

Q3. Change link color to red on hover.

Q4. Remove underline from all links.

Q5. Add underline only on hover.

Q6. Set active link color to orange.

Q7. Style a link with background and padding like a button.

Q8. Make a link change color and background on hover.

Q9. Apply bold font to hovered links.

Q10. Make focused links show a dotted border.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top