CSS - Focus: A Beginner's Guide

Hello there, future web design superstar! Today, we're going to dive into the exciting world of CSS focus. Don't worry if you've never written a line of code before – I'll be your friendly guide on this journey. By the end of this tutorial, you'll be focusing elements like a pro!

What is CSS Focus?

Let's start with the basics. CSS focus is a pseudo-class that allows us to style an element when it receives focus. But what does "receiving focus" mean? Well, imagine you're filling out a form online. When you click on an input field, it becomes highlighted or changes in some way. That's focus in action!

Focus is incredibly important for accessibility. It helps users, especially those navigating with a keyboard, understand which element they're currently interacting with.

Applies to

Before we start styling, it's crucial to know which elements can actually receive focus. Here's a handy table:

Focusable Elements
Links (<a>)
Buttons
Form inputs
Dropdown menus
Textarea
Select elements

Remember, not all HTML elements can receive focus by default. But don't worry, we'll cover how to make other elements focusable later on!

Syntax

Now, let's look at how we actually write CSS focus. The basic syntax is super simple:

element:focus {
    /* Your styles here */
}

See that colon before "focus"? That's what makes it a pseudo-class. It's like saying, "Hey CSS, apply these styles when this element is focused!"

CSS Focus - Link

Let's start with a common use case: styling a focused link. Here's an example:

a:focus {
    color: #ff6600;
    text-decoration: underline;
    outline: 2px solid #ff6600;
}

In this code, when a link receives focus:

1. Its color changes to a bright orange (#ff6600)
2. It gets underlined
3. A 2-pixel solid orange outline appears around it

This makes it super clear which link is currently focused, improving accessibility and user experience.

CSS Focus - Button

Buttons are another element where focus styles are crucial. Let's style a button:

button:focus {
    background-color: #4CAF50;
    color: white;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.5);
}

When this button receives focus:

1. Its background turns green (#4CAF50)
2. The text becomes white
3. A semi-transparent green "glow" appears around it

This creates a visually appealing and clear focus state for our button.

CSS Focus - Input Box

Input boxes are where focus really shines. Here's how we might style a focused input:

input:focus {
    border: 2px solid #3498db;
    background-color: #e8f4fc;
    outline: none;
}

In this example:

1. The border becomes a 2-pixel solid blue (#3498db)
2. The background changes to a light blue (#e8f4fc)
3. We remove the default outline

Pro tip: Always provide a clear visual indicator when removing the default outline. Otherwise, keyboard users might lose track of their focus!

CSS Focus - Dropdown Box

Dropdown boxes (or select elements) can also be styled on focus:

select:focus {
    border-color: #9b59b6;
    box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2);
}

Here, when the dropdown is focused:

1. The border color changes to purple (#9b59b6)
2. A light purple "glow" appears around it

This subtle change helps users understand which dropdown they're interacting with.

CSS Focus - Toggle Button

Toggle buttons are a bit special. We often want to style them differently when they're both focused and checked. Here's how:

.toggle:focus {
    outline: 2px solid #3498db;
}

.toggle:focus:checked {
    outline-color: #e74c3c;
}

In this code:

1. When the toggle is focused, it gets a blue outline
2. If it's both focused and checked, the outline turns red

This helps users understand both the focus state and the toggle state simultaneously.

CSS Focus - Associated Properties

There are several CSS properties commonly used with focus. Here's a table of the most useful ones:

Property	Description
outline	Creates a line around the element
box-shadow	Adds a shadow effect to the element
border	Defines the element's border
background	Sets the element's background
color	Changes the text color
text-decoration	Adds decoration to text (like underline)

Remember, you can combine these properties to create unique and accessible focus styles!

Conclusion

And there you have it, folks! You've just taken your first steps into the world of CSS focus. Remember, good focus styles aren't just about making things look pretty – they're about creating an inclusive, accessible web for everyone.

As you continue your coding journey, always keep accessibility in mind. It's not just a nice-to-have; it's a crucial part of web development. And who knows? Your focus styles might just be the thing that makes someone's day a little easier.

Keep practicing, stay curious, and most importantly, have fun with it! CSS is your playground, and focus is just one of the many exciting toys you get to play with. Happy coding!

Credits: Image by storyset