CSS Syntax: Selectors, Properties, and Values


To use CSS, you must understand its basic structure.

Every CSS rule follows a simple pattern.

Basic CSS Rule Structure

A CSS rule has three main parts:

  • Selector
  • Property
  • Value

In this example:

  • p is the selector.
  • color is the property.
  • red is the value.

What Is a Selector

A selector tells CSS which HTML element to style.

Examples of selectors:

  • h1 selects all main headings
  • p selects all paragraphs
  • body selects the whole page

What Is a Property

A property defines what you want to change.

Examples of properties:

  • color
  • font-size
  • background-color

What Is a Value

A value sets how the property should look.

Examples of values:

  • red
  • 16px
  • blue

One selector can have many properties.

Why CSS Syntax Matters

Correct syntax makes sure your styles work properly.

Even small mistakes can stop CSS from working.

Common Beginner Mistakes

  • Forgetting curly braces
  • Missing semicolons
  • Spelling property names wrong

Why This Matters for Jobs

Every frontend developer must write clean CSS.

Understanding syntax is the foundation of professional styling.

Practice Task

Write a CSS rule to:

  • Change text color of headings
  • Increase font size of paragraphs

What You Will Learn Next

In the next lesson, you will learn different ways to add CSS to a web page.