Styling Links

Question 1

What are the four main states of a link in CSS, and which pseudo-classes are used to target them?

Answer 1

Link (unvisited): :link - targets links that haven’t been visited yet
Visited: :visited - targets links that have been visited previously
Hover: :hover - targets links when the mouse pointer is over them
Active: :active - targets links at the moment they’re being clicked

Question 2

What is the correct order to define link state styles in CSS to ensure all styles are applied properly?

Answer 2

a:link { }
a:visited { }
a:hover { }
a:active { }

This is often remembered with the mnemonic “LoVe HAte” (Link, Visited, Hover, Active). If these are not defined in the correct order, some styles might be overridden due to CSS specificity rules.

Question 3

Why should :hover and :focus have the same styles?

Answer 3

This ensures accessibility for keyboard users, as :focus applies when users

Question 4

How can you remove the default underline from links?

Answer 4

a {
  text-decoration: none;
}

Question 5

How do you change the color of links on hover?

Answer 5

a:hover {
  color: red;
}

Question 6

How can you style links differently inside a specific element?

Answer 6

.navbar a {
  color: white;
}

Use a selector that targets links within that element. Example for links inside a .navbar.

Question 7

What CSS property is used to change the cursor when hovering over a link?

Answer 7

cursor: pointer; ensures the pointer cursor appears when hovering over a link:

a:hover {
  cursor: pointer;
}

Question 8

How can you make links look like normal text?

Answer 8

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

Question 9

How do you create a button-styled link?

Answer 9

a.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: blue;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

Use properties like display: inline-block, padding, and background-color:

Question 10

How can you make visited links a different color?

Answer 10

a:visited {
  color: purple;
}

Question 11

How can you create an animated underline effect on hover without using text-decoration?

Answer 11

You can use ::after with transform and transition. This creates a smooth growing underline effect.

a {
  position: relative;
  text-decoration: none;
  color: black;
}

a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: black;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease-out;
}

a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

Question 12

How can you style links differently based on whether they open in a new tab (target="_blank") using pure CSS?

Answer 12

a[target="_blank"]::after {
  content: " 🔗";
  font-size: 0.8em;
}

This adds an icon to indicate external links.

Question 13

How do you make a link change color smoothly on hover using transition?

Answer 13

a {
  color: blue;
  transition: color 0.3s ease-in-out;
}

a:hover {
  color: red;
}

This smoothly transitions the color change instead of an instant switch.

Question 14

How can you make links unclickable using CSS?

Answer 14

Use pointer-events: none;

a.disabled {
  pointer-events: none;
  color: gray;
  opacity: 0.6;
}

This prevents users from clicking the link while making it visually distinct.

Question 15

How can you apply different styles to links based on whether they are internal (same domain) or external (different domain)?

Answer 15

a[href^="http"]:not([href*="yourwebsite.com"]) {
  color: red;
}

Use :not() and attribute selectors. This targets external links (those starting with http but not containing your domain).

Question 16

How do you make an underline appear only on hover but not when the link is focused (for accessibility reasons)?

Answer 16

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus {
  outline: 2px solid blue; /* Instead of underline, provide a visible focus ring */
}

Question 17

How can you change the appearance of links inside dark mode without using JavaScript?

Answer 17

Use the @media (prefers-color-scheme: dark) media query:

@media (prefers-color-scheme: dark) {
  a {
    color: lightblue;
  }
}

This automatically adjusts link color when dark mode is enabled.

Question 18

How do you make links have a “ripple” effect when clicked?

Answer 18

a {
  position: relative;
  overflow: hidden;
}

a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.3s ease-out;
}

a:active::before {
  transform: scale(10);
  opacity: 0;
}

Question 19

How can you style links differently when they are inside a specific parent with JavaScript-applied classes (e.g., .dark-mode)?

Answer 19

.dark-mode a {
  color: lightgray;
}

.dark-mode a:hover {
  color: white;
}

This applies different link styles when .dark-mode is active on the parent container.

Question 20

How can you prevent links from wrapping while keeping long URLs readable?

Answer 20

a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block;
}

This prevents long URLs from breaking layout while keeping them readable with ....