CSS - Syntax

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 10–15 minutes

In this lesson you’ll learn how CSS rules are structured and how the cascade decides which styles apply when multiple rules target the same element.

Learning Objectives

• Recognize the parts of a CSS rule: selector and declarations.
• Understand cascade order: origin/importance, specificity, and source order.
• Write valid declarations with properties and values.

Details & Examples

Rule Structure

A CSS rule consists of a selector and one or more declarations:

selector { property: value; property2: value2; }

Common Selectors

• Element: p, h1
• Class: .note
• ID: #header

Declaration Basics

• property: what to style (e.g., color, margin)
• value: how to style it (e.g., tomato, 1rem)
• End each declaration with a semicolon ;

Cascade Order

1. Origin & importance (user-agent vs user vs author, normal vs !important)
2. Specificity
3. Source order (later wins)

Try it

Common Pitfalls

• Missing semicolons cause later declarations to be ignored.
• Accidentally increasing specificity with IDs makes future overrides harder.

Checks for Understanding

1. List the three factors the cascade uses to resolve conflicts.
2. Which selector is more specific: #id .card p or .card p.note?

Exercises

1. Write a valid rule with two declarations and explain each part (selector, property, value).
2. Demonstrate cascade order by creating two rules where the later rule wins via source order.