Active and focus states in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the <code>:focus</code> pseudo-class in CSS?

The <code>:focus</code> pseudo-class styles an element when it has keyboard focus, helping users see which element is active for keyboard navigation.

beginner

How does the <code>:active</code> pseudo-class differ from <code>:focus</code>?

:active styles an element while it is being clicked or pressed, whereas :focus styles an element when it is selected or ready to receive input.

beginner

Why is it important to style focus states for interactive elements?

Styling focus states improves accessibility by helping keyboard and assistive technology users know which element is currently selected or ready for interaction.

beginner

Which CSS property is commonly used to create a visible focus outline?

The outline property is commonly used to create a visible border around an element when it receives focus.

intermediate

Can you combine :focus and :active selectors in CSS? What does it do?

Yes, combining :focus and :active styles an element when it is both focused and being clicked, providing clear visual feedback during interaction.

Which CSS pseudo-class applies when a user clicks and holds a button?

A :hover

B :focus

C :active

D :visited

:active applies while the element is being clicked or pressed.

What does the :focus pseudo-class help with?

A Styling elements when hovered by mouse

B Styling elements when disabled

C Styling elements after clicking

D Styling elements when keyboard focused

:focus styles elements that have keyboard or programmatic focus.

Which CSS property is best for showing a clear focus outline?

A outline

B border

C background-color

D text-decoration

The outline property creates a visible border without affecting layout.

Why should you never remove focus outlines without replacement?

A It makes keyboard navigation hard

B It breaks page layout

C It slows down page loading

D It disables clicking

Removing focus outlines without a visible alternative harms accessibility for keyboard users.

Which state is active when a user tabs to a link using the keyboard?

A :hover

B :focus

C :active

D :visited

When tabbing, the element receives :focus to show it is selected.

Explain the difference between :focus and :active states in CSS and why both are important.

Think about keyboard navigation vs mouse clicking.

Describe how you would style a button to show a clear focus state that is accessible and visible on all devices.

Focus on visibility and accessibility.