CSS Syntax & Selectors

Introduction

CSS syntax defines how styles are written and applied to HTML elements. Selectors are used to target specific elements on a webpage and apply styles to them.

Understanding CSS syntax and selectors is essential for writing effective and clean CSS code.

In this lesson, you will learn the basic structure of CSS and different types of selectors used in web development.

What You’ll Learn

• CSS syntax structure
• What are selectors
• Types of selectors
• How selectors work
• Best practices

CSS Syntax?

CSS is written using rules that consist of a selector and a declaration block.
Each CSS rule contains three main parts:

selector {
    property: value;
}

Example:

p {
    color: blue;
    font-size: 24px;
}

Explanation:

• Selector → Which HTML element you want to style (p)
• Property → What you want to change (color)
• Value → How you want to change it (blue)
• Curly braces { } → Wrap the style rules
• Semicolon ; → Ends each rule

What is a CSS Selector?

A CSS selector is used to select the HTML element(s) you want to style.

Example:

h1 {
    color: red;
}

👉 This selects all <h1> elements and makes them red.

Types of CSS Selectors (Beginner Level)

Element Selector

Targets HTML elements directly.

p {
    font-size: 18px;
}

✔ Applies to all <p> tags

Class Selector

Targets elements with a specific class.
Class names start with a dot (.)

HTML:

<p class="highlight">This is important</p>

CSS:

.highlight {
    color: green;
}

✔ Can be used on multiple elements

ID Selector

Targets a unique element.
ID names start with a hash (#)

HTML:

<h1 id="main-title">Welcome</h1>

CSS:

#main-title {
    color: purple;
}

⚠ ID should be used only once per page

Class vs ID (Important)

Group Selector

You can style multiple elements at once.

h1, h2, p {
    font-family: Arial;
}

✔ Reduces repeated CSS code

Universal Selector

Selects all elements on the page.

* {
  margin: 0;
}

👉 Often used for resetting styles.

CSS Comments

Used to explain CSS code.

/* This is a comment */
p {
    color: black;
}

Comments are ignored by browsers.

Combining Selectors

You can combine selectors to target elements more specifically.

div p {
  color: orange;
}

👉 Targets <p> inside <div>.

Attribute Selector

You can select elements based on attributes.

input[type="text"] {
  border: 1px solid black;
}

👉 This targets only text input fields.

Pseudo-Class Selector

Used to style elements in a specific state.

a:hover {
  color: red;
}

👉 Changes link color when user hovers over it.

Pseudo-Element Selector

Used to style specific parts of elements.

p::first-letter {
  font-size: 30px;
}

👉 Styles the first letter of a paragraph.

Descendant vs Child Selector

Descendant Selector:

div p {
  color: blue;
}

👉 Targets all <p> inside <div>

Child Selector:

div > p {
  color: green;
}

👉 Targets only direct child <p>

Multiple Classes

You can apply multiple classes to one element.

<p class="red bold">Text</p>

.red {
  color: red;
}.bold {
  font-weight: bold;
}

👉 Combines multiple styles.

How Selectors Work

CSS selectors follow a matching process:

1. Browser finds matching HTML elements
2. Applies defined styles
3. Resolves conflicts using priority rules

Selector Priority (Specificity Basics)

Some selectors have higher priority:

• ID selector → Highest
• Class selector → Medium
• Element selector → Lowest

👉 Example:

#id {
  color: red;
}.class {
  color: blue;
}p {
  color: green;
}

👉 The ID style will apply.

Important Notes

• Use classes for reusable styles
• Use IDs for unique elements
• Avoid overusing universal selector
• Keep selectors simple

Common Mistakes

• Missing . for class selector
• Missing # for ID selector
• Overcomplicating selectors
• Not understanding specificity

Best Practices

• Use meaningful class names
• Avoid using IDs for styling
• Keep CSS organized
• Write clean and readable code

Real-Life Uses

• Styling headings and paragraphs
• Designing layouts
• Creating reusable styles
• Applying consistent design

Practice Tasks

• Task 1: Apply color using element selector.
• Task 2: Create a class and style it.
• Task 3: Use an ID selector.
• Task 4: Apply styles using group selector.
• Task 5: Combine selectors for nested elements.

FAQs

What is CSS syntax?

CSS syntax defines how styles are written using selectors and properties.

What is a selector in CSS?

A selector is used to target HTML elements for styling.

What is the difference between class and ID?

Class can be reused, while ID is unique.

Conclusion

CSS syntax and selectors are the foundation of styling web pages. By understanding how to write CSS rules and target elements using selectors, you can create clean and effective designs.

👉 In the next tutorial, you will learn about Ways to Add CSS.