CSS · Fundamentals

CSS Syntax & Selectors

Master CSS syntax structure and learn how to target elements with selectors

Find videos you like?

Save to resource drawer for future reference!

CSS Syntax Structure

Understanding CSS rule anatomy

CSS Rule = Selector + Declaration Block

Every CSS rule consists of a selector (what to style) and a declaration block (how to style it).

CSS Rule Anatomy

selector

What to style

{

property:value;

What to change

How to change it

property:value;

}

Real Example:

h1 {
  color: blue;
  font-size: 32px;
  text-align: center;
}

This rule styles all <h1> elements with blue color, 32px size, and centered alignment.

CSS Selectors

Targeting elements for styling

Selectors = Targeting System

Selectors are patterns that match HTML elements. They tell CSS which elements to style. Think of them as a way to "point at" specific parts of your webpage.

Element

Targets all elements of a specific type

p { ... }

All <p> tags

Class

Targets elements with specific class

.button { ... }

class="button"

ID

Targets a single unique element

#header { ... }

id="header"

Selector Types

Common selector patterns you'll use

p

Element Selector

Selects all elements of that type

All paragraphs

.card

Class Selector

Selects elements with that class

Elements with class="card"

#logo

ID Selector

Selects the unique element with that ID

Element with id="logo"

*

Universal Selector

Selects all elements on the page

Every single element

div, p, h1

Group Selector

Selects multiple different elements

All divs, paragraphs, and h1s

div p

Descendant Selector

Selects elements inside other elements

Paragraphs inside divs

Interactive Selector Demo

See selectors in action

Selector Types in Action

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h2>🎯 CSS Selectors Demo</h2>
      <p>
        Regular paragraph styled with element selector
        <span class="label label-element">p selector</span>
      </p>
      <p class="highlight">
        Paragraph with class styled using class selector
        <span class="label label-class">.highlight</span>
      </p>
      <p>
        Another regular paragraph with element selector
        <span class="label label-element">p selector</span>
      </p>
      <p id="special">
        Unique paragraph with ID styled using ID selector
        <span class="label label-id">#special</span>
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Selector Specificity

Which styles win when there's a conflict?

When multiple selectors target the same element, CSS uses specificity to determine which styles apply. More specific selectors override less specific ones.

ID Selector

Highest priority - most specific

#header

Class Selector

Medium priority

.button

Element Selector

Lowest priority - least specific

p

Best Practice

Use classes for most styling! They're reusable, flexible, and have good specificity. Reserve IDs for JavaScript and unique page elements.

Remember

CSS rules have a selector (what) and declarations (how)

Element selectors target all elements of that type

Class selectors (.class) are reusable - use these most often!

ID selectors (#id) are unique and have highest specificity

Previous Topic

CSS Introduction

What is CSS, how it works with HTML, CSS versions (CSS1-CSS4), and its role in web development.

Next Topic

Specificity & Cascade

Understanding CSS specificity calculation, inheritance, cascade layers, and rule application order.

Ask a Question

Have a question about Syntax & Selectors? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Fundamentals

CSS Syntax & Selectors

Master CSS syntax structure and learn how to target elements with selectors

Find videos you like?

Save to resource drawer for future reference!

CSS Syntax Structure

Understanding CSS rule anatomy

CSS Rule = Selector + Declaration Block

Every CSS rule consists of a selector (what to style) and a declaration block (how to style it).

CSS Rule Anatomy

selector

What to style

{

property:value;

What to change

How to change it

property:value;

}

Real Example:

h1 {
  color: blue;
  font-size: 32px;
  text-align: center;
}

This rule styles all <h1> elements with blue color, 32px size, and centered alignment.

CSS Selectors

Targeting elements for styling

Selectors = Targeting System

Selectors are patterns that match HTML elements. They tell CSS which elements to style. Think of them as a way to "point at" specific parts of your webpage.

Element

Targets all elements of a specific type

p { ... }

All <p> tags

Class

Targets elements with specific class

.button { ... }

class="button"

ID

Targets a single unique element

#header { ... }

id="header"

Selector Types

Common selector patterns you'll use

p

Element Selector

Selects all elements of that type

All paragraphs

.card

Class Selector

Selects elements with that class

Elements with class="card"

#logo

ID Selector

Selects the unique element with that ID

Element with id="logo"

*

Universal Selector

Selects all elements on the page

Every single element

div, p, h1

Group Selector

Selects multiple different elements

All divs, paragraphs, and h1s

div p

Descendant Selector

Selects elements inside other elements

Paragraphs inside divs

Interactive Selector Demo

See selectors in action

Selector Types in Action

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h2>🎯 CSS Selectors Demo</h2>
      <p>
        Regular paragraph styled with element selector
        <span class="label label-element">p selector</span>
      </p>
      <p class="highlight">
        Paragraph with class styled using class selector
        <span class="label label-class">.highlight</span>
      </p>
      <p>
        Another regular paragraph with element selector
        <span class="label label-element">p selector</span>
      </p>
      <p id="special">
        Unique paragraph with ID styled using ID selector
        <span class="label label-id">#special</span>
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Selector Specificity

Which styles win when there's a conflict?

When multiple selectors target the same element, CSS uses specificity to determine which styles apply. More specific selectors override less specific ones.

ID Selector

Highest priority - most specific

#header

Class Selector

Medium priority

.button

Element Selector

Lowest priority - least specific

p

Best Practice

Use classes for most styling! They're reusable, flexible, and have good specificity. Reserve IDs for JavaScript and unique page elements.

Remember

CSS rules have a selector (what) and declarations (how)

Element selectors target all elements of that type

Class selectors (.class) are reusable - use these most often!

ID selectors (#id) are unique and have highest specificity

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

CSS Introduction

Specificity & Cascade

Building Your Learning Module...

CSS Syntax & Selectors

CSS Rule = Selector + Declaration Block

CSS Rule Anatomy

Real Example:

Selectors = Targeting System

Element

Class

ID

Selector Types in Action

ID Selector

Class Selector

Element Selector

Best Practice

Remember

CSS Introduction

Specificity & Cascade

CSS Syntax & Selectors

CSS Rule = Selector + Declaration Block

CSS Rule Anatomy

Real Example:

Selectors = Targeting System

Element

Class

ID

Selector Types in Action

ID Selector

Class Selector

Element Selector

Best Practice

Remember