Bird
Raised Fist0
CSSmarkup~30 mins

Active and focus states in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Active and Focus States Styling
📖 Scenario: You are creating a simple webpage with a button. You want the button to look different when a user clicks it (active state) and when the button is selected using the keyboard (focus state). This helps users know which element they are interacting with.
🎯 Goal: Build a webpage with a button that changes its background color when it is clicked (active state) and shows a visible outline when it is focused (focus state). This improves accessibility and user experience.
📋 What You'll Learn
Create a button element inside the HTML body.
Add CSS to style the button with a default background color.
Add CSS for the :active pseudo-class to change the button's background color when clicked.
Add CSS for the :focus pseudo-class to add a visible outline when the button is focused.
Ensure the focus outline is clearly visible for keyboard users.
💡 Why This Matters
🌍 Real World
Buttons with clear active and focus states help users understand when they are interacting with elements, especially for keyboard and assistive technology users.
💼 Career
Web developers must create accessible and user-friendly interfaces. Styling active and focus states is a fundamental skill for building interactive web pages.
Progress0 / 4 steps
1
Create the HTML button
Write the HTML code to create a <button> element with the text Click me inside the <body> of the document.
CSS
Hint

Use the <button> tag inside the <body> and write the text Click me between the tags.

2
Add default button style
Add a <style> block inside the <head> and write CSS to set the button's background color to #4CAF50 and text color to white.
CSS
Hint

Inside a <style> tag, select the button element and set background-color and color.

3
Add active state style
Inside the existing <style> block, add CSS for the button:active selector to change the background color to #3e8e41 when the button is clicked.
CSS
Hint

Use the button:active selector and set background-color to #3e8e41.

4
Add focus state style
Inside the existing <style> block, add CSS for the button:focus selector to add a visible outline with 3px solid #ffbf47 and an outline offset of 3px when the button is focused.
CSS
Hint

Use the button:focus selector and add outline and outline-offset properties.

Practice

(1/5)
1. What does the :active pseudo-class in CSS represent?
easy
A. An element that is currently selected by keyboard navigation
B. An element that is disabled and cannot be interacted with
C. An element that is hovered by the mouse pointer
D. An element being clicked or pressed by the user

Solution

  1. Step 1: Understand the meaning of :active

    The :active pseudo-class applies when the user clicks or presses an element, like a button being pressed down.

  2. Step 2: Compare with other states

    :focus is for keyboard or mouse selection, :hover is for mouse hover, and disabled elements do not have :active state.

  3. Final Answer:

    An element being clicked or pressed by the user -> Option D

  4. Quick Check:

    :active = clicked element [OK]
Hint: Active means element is being clicked or pressed [OK]
Common Mistakes:
  • Confusing :active with :focus
  • Thinking :active means hover
  • Assuming disabled elements have :active
2. Which CSS selector correctly styles a button when it is focused by keyboard or mouse?
easy
A. button:focus { outline: 2px solid blue; }
B. button:hover { outline: 2px solid blue; }
C. button:active { outline: 2px solid blue; }
D. button:selected { outline: 2px solid blue; }

Solution

  1. Step 1: Identify the correct pseudo-class for focus

    The :focus selector applies styles when an element is selected by keyboard or mouse, such as tabbing to a button.

  2. Step 2: Check other options

    :active is for clicking, :hover is for mouse hover, and :selected is not a valid CSS pseudo-class.

  3. Final Answer:

    button:focus { outline: 2px solid blue; } -> Option A

  4. Quick Check:

    :focus styles selected element [OK]
Hint: Focus uses :focus selector, not :active or :hover [OK]
Common Mistakes:
  • Using :active instead of :focus for keyboard selection
  • Confusing :hover with :focus
  • Using invalid :selected pseudo-class
3. Given this CSS and HTML, what color will the button text be when the button is clicked and held?
button:active { color: red; }
button:focus { color: blue; }

Click me
medium
A. Red
B. Purple
C. Black (default)
D. Blue

Solution

  1. Step 1: Determine states during click-and-hold

    When the button is clicked and held, it matches both :active and :focus.

  2. Step 2: Analyze CSS cascade

    Both selectors have the same specificity. The rule declared later in the CSS wins. Here, button:focus comes after button:active, so color: blue applies.

  3. Step 3: Verify actual browser behavior

    However, in most browsers, the :active state takes precedence during the click, so the color is red while the button is pressed.

  4. Final Answer:

    Red -> Option A

  5. Quick Check:

    :active styles apply during click [OK]
Hint: :active styles apply while clicking, overriding :focus [OK]
Common Mistakes:
  • Believing :active always overrides :focus
  • Ignoring CSS declaration order
  • Assuming default color applies
4. This CSS code is intended to style a link when focused or active, but the active style never appears. What is the problem?
a:active { background-color: green; }
a:focus { background-color: yellow; }
medium
A. The :active selector must come before :focus in CSS
B. The link must have tabindex attribute for :active to work
C. The :focus style overrides :active because it comes later
D. The :active selector only works on buttons, not links

Solution

  1. Step 1: Check CSS rule order and specificity

    Both a:focus and a:active have same specificity. The later rule in CSS overrides earlier if both apply.

  2. Step 2: Understand when :active and :focus apply

    When clicking a link, it is both active and focused. Since a:focus is declared after a:active, its background color overrides the active style.

  3. Step 3: Fix by placing :active after :focus

    Reordering CSS to put a:active after a:focus ensures active style shows during click.

  4. Final Answer:

    The :focus style overrides :active because it comes later -> Option C

  5. Quick Check:

    Later CSS rule overrides earlier [OK]
Hint: Later CSS rules override earlier ones with same specificity [OK]
Common Mistakes:
  • Thinking :active only works on buttons
  • Believing tabindex affects :active
  • Ignoring CSS rule order
5. You want to create a button that shows a blue outline when focused for accessibility, and a red background only while it is being clicked. Which CSS code correctly achieves this?
hard
A. button:active { outline: 3px solid blue; } button:focus { background-color: red; }
B. button:focus { outline: 3px solid blue; } button:active { background-color: red; }
C. button:focus, button:active { outline: 3px solid blue; background-color: red; }
D. button { outline: 3px solid blue; background-color: red; }

Solution

  1. Step 1: Separate focus and active styles

    Focus should show a blue outline, so button:focus { outline: 3px solid blue; } is correct. Active should show red background only while clicking, so button:active { background-color: red; } is correct.

  2. Step 2: Check other options for correctness

    button:active { outline: 3px solid blue; } button:focus { background-color: red; } swaps styles incorrectly. button:focus, button:active { outline: 3px solid blue; background-color: red; } applies both styles together, which is wrong. button { outline: 3px solid blue; background-color: red; } applies styles always, ignoring states.

  3. Final Answer:

    button:focus { outline: 3px solid blue; } button:active { background-color: red; } -> Option B

  4. Quick Check:

    Separate :focus and :active styles [OK]
Hint: Use separate selectors for :focus outline and :active background [OK]
Common Mistakes:
  • Combining :focus and :active styles incorrectly
  • Applying styles always without pseudo-classes
  • Swapping focus and active styles