Selectors and Simple Rules

What you will learn

• Explain what a selector does.
• Recognize a CSS rule as a selector with declarations.
• Distinguish a property from a value.
• Read a tiny CSS rule in plain language.

What a selector does

A selector tells CSS which part of the page should receive a style rule.

If the selector is p, CSS is targeting paragraph elements. If the selector is h1, CSS is targeting main headings.

First selector idea

A selector chooses the page part to style.

What a simple rule looks like

A tiny CSS rule often looks like this: p { color: navy; }.

The selector is p. Inside the braces is a declaration. That declaration says the property is color and the value is navy.

Read it in pieces

Selector first, then property and value inside the rule.

Property and value

The property names what should change. The value gives the chosen setting.

In color: navy;, color is the property and navy is the value. That pattern appears again and again in CSS.

Repeatable pattern

Property names the setting. Value gives the setting.

Why simple rules matter

CSS becomes easier when you stop treating it like one giant wall of symbols. A beginner can read one selector and one declaration at a time.

That habit is enough to start changing a page on purpose instead of guessing.

Keep it readable

One selector and one declaration are enough to build confidence.

What to remember before lesson 4

CSS rules follow a repeatable structure: choose a page part, name the property, and give it a value.

The next lesson uses that same pattern to style text with colors, fonts, and other readable text choices.

Take this forward

Selectors and property-value pairs are the heart of beginner CSS.