Active and focus states in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to change the button background color when it is focused.

CSS

button:[1] {
  background-color: lightblue;
}

Drag options to blanks, or click blank then click option'

Avisited

Bhover

Cfocus

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using :hover instead of :focus

Using :active which applies only during click

Using :visited which applies to links only

The :focus pseudo-class applies styles when the button is focused, such as when tabbed to.

2fill in blank

medium

Complete the code to change the button background color when it is being clicked.

CSS

button:[1] {
  background-color: darkblue;
  color: white;
}

Drag options to blanks, or click blank then click option'

Afocus

Bactive

Chover

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Using :focus which applies before or after clicking

Using :hover which applies when mouse is over

Using :visited which applies only to links

The :active pseudo-class applies styles while the button is being clicked or pressed.

3fill in blank

hard

Fix the error in the code to style the button when focused and active.

CSS

button:[1], button:active {
  outline: 3px solid orange;
}

Drag options to blanks, or click blank then click option'

Afocus

Bhover

Cvisited

Dchecked

Attempts:

3 left

💡 Hint

Common Mistakes

Using :hover instead of :focus

Using :visited which applies only to links

Using :checked which applies to checkboxes/radios

The :focus pseudo-class must be used to style the button when it is focused. The code correctly styles :active as well.

4fill in blank

hard

Fill both blanks to style a link with a red underline when hovered and a green underline when focused.

CSS

a:[1] {
  text-decoration-color: red;
}
a:[2] {
  text-decoration-color: green;
}

Drag options to blanks, or click blank then click option'

Ahover

Bfocus

Cactive

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping hover and focus

Using :active which applies only during click

Using :visited which applies after visiting a link

:hover styles the link when the mouse is over it, and :focus styles it when keyboard focused.

5fill in blank

hard

Fill all three blanks to style a button with a blue border on focus, a yellow background on hover, and a gray background on active.

CSS

button:[1] {
  border: 2px solid blue;
}
button:[2] {
  background-color: yellow;
}
button:[3] {
  background-color: gray;
}

Drag options to blanks, or click blank then click option'

Afocus

Bhover

Cactive

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up hover and active

Using :visited which applies only to links

Forgetting to style focus for accessibility

:focus styles the border when the button is focused, :hover changes background on mouse over, and :active changes background while clicking.