CSS Tutorial

CSS Syntax

Every CSS rule follows the same simple pattern: a selector that chooses elements, and a block of declarations that say how they should look.

The structure of a CSS rule

A CSS rule is made of two main parts: a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block, wrapped in curly braces, holds one or more declarations.

The anatomy of a CSS rule

selector {
  property: value;
  property: value;
}

Each declaration has a property (what you want to change, like color) and a value (what you want to change it to, like red). A colon separates the property from its value, and a semicolon ends each declaration.

A real example broken down

One rule, two declarations

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

In this rule: "p" is the selector (all paragraphs), "color" and "font-size" are properties, "blue" and "18px" are their values. Together they tell the browser: make every paragraph blue and 18 pixels tall.

Try it yourself

Change the values and re-run

Example

<!DOCTYPE html>
<html>
<head>
<style>
  h1 {
    color: darkred;
    text-align: center;
  }
  p {
    color: #333;
    font-size: 18px;
    background-color: #fff4e6;
    padding: 10px;
  }
</style>
</head>
<body>
  <h1>CSS Syntax Demo</h1>
  <p>Try changing color, font-size or padding above.</p>
</body>
</html>

Syntax terms to remember

Term	Meaning	Example
Selector	Chooses which elements to style	p
Property	The feature you want to change	color
Value	The setting for that property	blue
Declaration	A property and value together	color: blue;
Rule set	A selector plus its declaration block	p { color: blue; }

⚠️

Forgetting the semicolon at the end of a declaration is one of the most common beginner mistakes. The last declaration in a block can technically skip it, but always adding it prevents errors when you add more lines later.

Key points

A CSS rule = selector + declaration block.
Declarations go inside curly braces { }.
Each declaration is property: value; .
Use a colon between property and value.
End each declaration with a semicolon.