---

Introduction to CSS Selectors

CSS selectors are the foundation of styling HTML. They determine where your CSS rules apply and allow you to target elements efficiently. Whether you’re designing a simple webpage or a complex interface, mastering selectors is crucial. For a deeper dive into CSS basics, check out W3Schools CSS Tutorial

What is a CSS Selector?

A CSS selector targets HTML elements to which you apply CSS rules. It’s the part before the curly braces in a CSS rule. For example:

h1 {
    color: blue;
}

Here, h1 is the selector, which targets all <h1> elements in your HTML.

CSS selectors are categorized into element, class, ID, attribute, and universal selectors. Each serves a specific purpose in styling your HTML efficiently.

---

Element Selector Example

Element selectors target all elements of a specific tag. For instance, if you have three <h2> headings:

h2 {
    color: red;
}

All <h2> elements will turn red. This is ideal for styling multiple elements of the same type consistently.

---

Class Selector

Class selectors group elements under a shared style using a dot (.) followed by the class name:

.red-text {
    color: red;
}

Add the class to any element to apply the style. Unlike IDs, classes can be reused across multiple elements. Learn more about classes in MDN Web Docs.

---

ID Selector- CSS Selectors

ID selectors target a unique element using # followed by the ID:

#main {
    color: green;
}

IDs are unique per HTML page, making them perfect for styling single elements. Use IDs sparingly for sections requiring a one-off style.

---

Attribute Selector- CSS selector

Attribute selectors target elements with specific attributes or attribute values:

p[draggable] {
    color: red;
}

p[draggable="false"] {
    color: red;
}

This allows precise control when targeting elements based on attributes, adding flexibility beyond classes and IDs.

---

Universal Selector-CSS selector

The universal selector * targets all elements on the page:

* {
    text-align: center;
}

Use it for global styles, such as resetting margins or centering content.

---

Hands-On Exercise Activity: Apply CSS Selectors in a Real Project

This is where I stopped playing and start cooking. Time to apply everything I just learned. I completed five selector challenges inside my style.css file without touching the HTML. Real-world rules only — no shortcuts.

🚀 The Goals

• Target and style all <p> paragraph elements using the element selector.
• Style elements that share the same class selector.
• Target an element using a unique ID selector.
• Select only the <li> elements that contain a value=”4″ attribute.
• Apply a global style to all elements with the universal selector.

Below is code drop zones where I placed my finished CSS Selector formulas to complete each part of the assignment. Below is a real-world walk-through of how II completed this exercise assignment in Visual Studio Code.

💻 Code Snippet Section

1. Element Selector Solution

p {
  color: red;
}

2. Class Selector Solution

.note {
  font-size: 20px;
}

3. ID Selector Solution-CSS Selectors

#id-selector-demo {
  color:green;
}

4. Attribute Selector Solution- CSS Selectors

li[value="4"] {
  color: blue;
}

5. Universal Selector Solution- CSS Selectors

* {
  font-family: sans-serif;
}

When you finish, refresh your browser and visually confirm that each selector works as expected. If something breaks, breathe — it’s always a missing bracket. Debug like a pro and keep pushing.

Want to compare your work with real examples? Check out CSS Selector Reference for more selector types and explanations.