HTML & CSS - Mastery / CSS Selectors

Simple selectors (select elements based on name, id, class)

Master Code Block (This will be used for further examples)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Selectors Example</title>
  </head>
  <body>
    <!--All content to be added here-->
  </body>
</html>

🔹 1. Element Selector (by Name)

Selects all HTML elements of a specific type.

✅ This targets all <p> (paragraph) tags and sets their text color to blue.

🔹 2. ID Selector

Selects a single element with a specific id.

Use the # symbol followed by the ID name.

✅ This applies the yellow background to the element with id="header".

🔸 Note: ID must be unique on a page.

🔹 3. Class Selector

Selects all elements with a specific class.

Use a . followed by the class name.

✅ This styles all elements with class="box".

🔸 One element can have multiple classes.

✅ Summary Table

Selector Type

Syntax

Example

Target

Element

element

p {}

All <p> tags

ID

#id

#header {}

Element with id="header"

Class

.class

.box {}

All elements with class="box"