CSS Links Practice Questions with Solutions

By /

Introduction

CSS allows you to style hyperlinks to make them more attractive and user-friendly. You can change a link’s color, remove the underline, add hover effects, and style different link states such as visited and active. In this chapter, you’ll practice CSS link properties through simple solved questions that are easy for beginners to understand. CSS Links Practice questions with solutions help to understand the concepts.

Question 1: Change the Color of a Link

Problem Statement

Write CSS to change the color of all hyperlinks to blue.

CSS Code

a {
    color: blue;
}

Output

All hyperlinks appear in blue.

Explanation

  • color changes the text color of the link.
  • blue is a predefined CSS color.
  • Only the link color changes; other styles remain the same.

Question 2: Remove the Underline from a Link

Problem Statement

Write CSS to remove the default underline from all hyperlinks.

CSS Code

a {
    text-decoration: none;
}

Output

All hyperlinks appear without an underline.

Explanation

  • text-decoration: none; removes the default underline.
  • It is commonly used for navigation menus.
  • You can add hover effects to improve user experience.

Question 3: Underline a Link on Hover

Problem Statement

Write CSS to underline a hyperlink when the mouse pointer moves over it.

CSS Code

a:hover {
    text-decoration: underline;
}

Output

When the mouse pointer is placed over a link, an underline appears.

Explanation

  • :hover applies styles when the mouse pointer is over the link.
  • text-decoration: underline; adds the underline.
  • Hover effects provide visual feedback to users.

Question 4: Change the Link Color on Hover

Problem Statement

Write CSS to change the color of a hyperlink to red when the mouse pointer moves over it.

CSS Code

a:hover {
    color: red;
}

Output

The hyperlink changes from its original color to red when hovered.

Explanation

  • :hover targets the link while the mouse pointer is over it.
  • color: red; changes the link color.
  • This effect improves user interaction.

Question 5: Style Visited Links

Problem Statement

Write CSS to display visited hyperlinks in purple.

CSS Code

a:visited {
    color: purple;
}

Output

Links that have already been visited appear in purple.

Explanation

  • :visited styles links that the user has already opened.
  • purple helps users identify previously visited pages.
  • This improves website navigation.

Question 6: Style Active Links

Problem Statement

Write CSS to change the color of a hyperlink to green while it is being clicked.

CSS Code

a:active {
    color: green;
}

Output

The hyperlink appears green while the user clicks it.

Explanation

  • :active targets a link while it is being clicked.
  • color: green; changes the text color during the click.
  • This provides instant visual feedback to the user.

Question 7: Change the Mouse Cursor on Hover

Problem Statement

Write CSS to display a pointer cursor when the mouse moves over a hyperlink.

CSS Code

a {
    cursor: pointer;
}

Output

The mouse cursor changes to a hand pointer when it moves over the link.

Explanation

  • cursor changes the appearance of the mouse pointer.
  • pointer displays the hand icon commonly used for clickable elements.
  • It helps users recognize clickable links.

Question 8: Create a Button-Like Link

Problem Statement

Write CSS to style a hyperlink like a button with:

  • Blue background
  • White text
  • 10px top and bottom padding
  • 20px left and right padding
  • No underline

CSS Code

a {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
}

Output

The hyperlink appears like a blue button with white text.

Explanation

  • background-color adds the button background.
  • color changes the text color.
  • padding increases the clickable area.
  • text-decoration: none; removes the underline.

Question 9: Add a Background Color on Hover

Problem Statement

Write CSS to change the background color of a hyperlink to lightgray when the mouse pointer moves over it.

CSS Code

a:hover {
    background-color: lightgray;
}

Output

The hyperlink displays a light gray background when hovered.

Explanation

  • :hover applies styles when the mouse pointer is over the link.
  • background-color changes the background color.
  • Hover backgrounds make links easier to identify.

Question 10: Style All Link States

Problem Statement

Write CSS to style all four link states:

  • Unvisited → Blue
  • Visited → Purple
  • Hover → Red
  • Active → Green

CSS Code

a:link {
    color: blue;
}

a:visited {
    color: purple;
}

a:hover {
    color: red;
}

a:active {
    color: green;
}

Output

The hyperlink behaves as follows:

  • Blue before visiting
  • Purple after visiting
  • Red when hovered
  • Green while being clicked

Explanation

  • :link styles unvisited links.
  • :visited styles visited links.
  • :hover styles links when the mouse pointer is over them.
  • :active styles links while they are being clicked.

Key Takeaways

  • color changes the text color of links.
  • text-decoration adds or removes the underline.
  • :hover creates interactive effects.
  • :visited styles previously opened links.
  • :active styles links while they are being clicked.
  • background-color can make links look like buttons.
  • Combining different link states improves user experience and navigation.

Frequently Asked Questions (FAQs)

1. How do I change the color of a hyperlink in CSS?

Use the color property.

a {
    color: blue;
}

2. How do I remove the underline from a hyperlink?

Use the text-decoration property.

a {
    text-decoration: none;
}

3. What is the :hover pseudo-class?

The :hover pseudo-class applies CSS styles when the mouse pointer moves over an element.

4. What is the difference between :visited and :active?

  • :visited styles links that the user has already opened.
  • :active styles links while they are being clicked.

5. How can I make a hyperlink look like a button?

Apply properties such as:

  • background-color
  • color
  • padding
  • text-decoration: none

These styles make a hyperlink look like a button.

6. Why is the cursor: pointer; property used?

It changes the mouse cursor to a hand pointer, helping users recognize that an element is clickable.

7. What is the correct order for styling link states?

The recommended order is:

  1. :link
  2. :visited
  3. :hover
  4. :active

This order helps ensure that all link styles work correctly.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top