• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

CSS Links Quiz

Q1: Which pseudo-class targets unvisited links?

A. :link
B. :hover
C. :active
D. :focus

Q2: Which pseudo-class is used for hover effect?

A. :focus
B. :hover
C. :visited
D. :target

Q3: What is the correct order to style link states?

A. :hover → :link → :visited
B. :link → :visited → :hover → :active
C. :active → :hover → :link
D. :visited → :link → :hover

Q4: Which property removes link underline?

A. text-decoration: none;
B. border: 0;
C. text-align: center;
D. display: none;

Q5: What happens on a:active state?

A. Link is hovered
B. Link is being clicked
C. Link is focused
D. Link is styled by default

Q6: Which property changes link color?

A. background
B. color
C. border-color
D. font-style

Q7: What does a:visited style?

A. Active links
B. Previously clicked links
C. Hovered links
D. All links

Q8: How can you style a link like a button?

A. Add class and use background, padding, border-radius
B. Use <button> tag
C. Set display: none
D. Use only text-align

Q9: Which pseudo-class applies when tab key selects a link?

A. :hover
B. :focus
C. :active
D. :checked

Q10: What will this do? a:hover { color: red; }

A. Link text becomes bold
B. Link color turns red on mouse hover
C. Link is removed
D. Link background turns red
← Previous Next →
Login
Go Back Top