CSS Fundamentals

Selectors

Tell CSS exactly which HTML elements you want to find, target, and style.

HTML CSS

p { … }
.note { … }
#welcome { … }

element
class
id

>_ What Is a CSS Selector?

A CSS selector tells the browser which HTML element — or group of elements — should receive a set of CSS styles.

Think of a selector as CSS saying: “Find this part of the webpage.” The declarations inside the curly braces then say: “Now style it like this.”

Element Selector

Targets every HTML element with a particular tag name.

.class

Class Selector

Targets every element that uses a particular class.

#id

ID Selector

Targets an element using its unique ID.

>_ Element Selectors

An element selector uses the HTML tag name itself.

For example, this selector targets every paragraph on the page:

element-selector.css

p {
color: #087b49;
}

If the page contains five <p> elements, all five will receive this color.

>_ Class Selectors

A class selector begins with a period followed by the class name.

class-selector.css

.important {
font-weight: bold;
color: #0077cc;
}

This rule only affects elements that contain class=”important”.

>_ ID Selectors

HTML also has an id attribute. An ID is used to identify a specific element.

CSS selects an ID using the # symbol.

id-selector.html

<h1 id=“welcome”>
  Welcome to mC0de
</h1>

#welcome {
  color: #071a35;
  text-align: center;
}

>_ Spot the Difference

p

An element selector targets every matching HTML tag.

.message

A class selector targets elements using class=”message”.

#welcome

An ID selector targets the element using id=”welcome”.

{ ... }

The declarations inside the braces determine how the selected elements look.

>_ Using Selectors Together

A stylesheet can contain many different selectors. Each selector can target a different part of the page.

selectors.css

p {
  color: #52677a;
}

.highlight {
  background-color: #e9fff3;
}

#welcome {
  text-align: center;
}

🎯

Remember

The symbols matter: p selects an element, .note selects a class, and #welcome selects an ID. One tiny symbol can completely change what your CSS targets.

Ready to Code?

Target different parts of a webpage.

Use an element selector, class selector, and ID selector together and watch exactly which elements each rule changes.

⚡

mC0de Challenge

Target the Page

Use three different selector types to style specific parts of a mini webpage.

✓ Use an element selector to style every <p>.
✓ Create a class selector named .highlight.
✓ Give .highlight a background color.
✓ Create an ID selector named #welcome.
✓ Use #welcome to center and color the main heading.
✓ Apply class="highlight" to only one paragraph.

>_ Challenge accepted. Target it below.

mC0de Interactive Sandbox

Selectors Challenge

Live Preview

HTML + CSS Input EDIT

Live Result PREVIEW

🎯 Experiment with p, .highlight, and #welcome to see how each selector targets different HTML.

✓

Lesson 08 Recap

What You’ve Learned

✓ CSS selectors determine which HTML elements receive styles.

✓ Element selectors such as p target HTML tags.

✓ Class selectors begin with a period, such as .highlight.

✓ ID selectors begin with #, such as #welcome.

✓ Different selectors can coexist inside the same stylesheet.

✓ Choosing the correct selector lets you precisely control your design.

Target acquired! 🎯 You can now tell CSS exactly which parts of a webpage you want to style.

🚀

Nice work!

Finished this lesson? Mark it complete to track your progress.

← Classes HTML & CSS Home Next Lesson → Pseudo-classes