CSS Syntax and Rules

A CSS rule consists of a selector followed by a declaration block containing property–value pairs.

The form is selector { property: value; }. A colon separates a property from its value, a semicolon ends the declaration, and braces contain the declarations belonging to one selector.

CSS property names are written using hyphens, for example background-color. Whitespace usually helps readability but does not change the meaning of a simple rule.

Target all paragraphs inside the demonstration.

HTML

<p>A short message.</p>

CSS

p { color: #1d4ed8; }

Rendered output

Observe: The paragraph text changes to blue.

Add spacing and a background in the same rule.

HTML

<p>A short message.</p>

CSS

p { color: #1d4ed8; background-color: #dbeafe; padding: 14px; border-radius: 8px; }

Rendered output

Observe: One selector applies four declarations to the same paragraph.

In <code>p { color: navy; }</code>, <code>p</code> is the selector, <code>color</code> is the property, and <code>navy</code> is the value.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Do not omit the colon between the property and its value.
• A malformed declaration may be ignored even when the rest of the stylesheet continues to work.

Add font-weight: 700; to the second rule, then remove a colon and inspect the difference.

Before changing the code, predict what will change. Then verify by checking the rendered result.

A readable CSS rule makes selector, property and value easy to identify.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.