You know how to add CSS to HTML, but how do you tell CSS which specific elements to style? This is where selectors come in! Selectors are patterns that select the HTML elements you want to style.

Think of selectors as pointing fingers—they point to the elements you want to change.

Engagement Message

Ready to jump in?

The most basic selector is the type selector. It targets all elements of a specific HTML tag type.

For example, p { color: blue; } makes ALL paragraphs blue. The p is the selector targeting every <p> element.

Engagement Message

What would the selector h1 target on a page?

But what if you want to style only some paragraphs differently? This is where class selectors shine!

You add a class attribute to HTML elements, like <p class="highlight">. Then, in your CSS, you use a dot (.) followed by the class name: .highlight { background: yellow; }.

Engagement Message

What symbol tells CSS that .highlight is a class selector?