CSS Syntax

Learn the language of CSS - how to write style rules that browsers understand!

Learning Objectives

Understand CSS syntax
Learn about selectors, properties, and values
Write your first CSS rules

Explanation

CSS has its own special language, but it's actually quite simple! A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style (like paragraphs, headings, or links). The declaration block contains one or more declarations, separated by semicolons. Each declaration includes a property name and a value, separated by a colon. Think of it like giving instructions to a painter: - The selector is WHO you want to paint (like "the front door") - The property is WHAT you want to change (like "the color") - The value is HOW you want to change it (like "to blue")

Code Example

/* This styles all paragraph elements */
p {
  color: blue;
  font-size: 16px;
  margin-bottom: 10px;
}

Try It Yourself!

Try writing a CSS rule to make all headings (h1) red!

CSS Editor

Mini Quiz

Test your knowledge with these quick questions!

1. What is a CSS selector?

It's a tool to select colors

It tells us how to style an element

It points to the HTML element you want to style

It's a special type of CSS property

2. In CSS, what comes between a property and its value?

A semicolon (;)

A comma (,)

A colon (:)

An equals sign (=)

Your Progress

Lesson ProgressIn Progress

Est. time: 15-20 min

75 points

Module Progress

Basic Styling2/10 completed

Complete all lessons to earn the Style Wizard badge!

Rewards

Complete this lesson

Earn 75 points

Complete this module

Earn the Style Wizard badge