A declaration is one CSS styling instruction: a property name paired with the value you want it to use. Think of it as a tiny note to the browser: “make this text 36 pixels tall” or “center this heading.” section 1.17
Read a declaration from left to right:
- Choose a property, such as font-size, color, margin, or text-align. section 1.17
- Add a colon, then provide the value and any needed unit, such as 36px. section 1.17
- Finish with a semicolon: font-size: 36px; section 1.19
One instruction, then several
h1 { font-size: 36px; text-align: center; font-variant: small-caps; } Each line inside the braces is a declaration. Together, they form a declaration block; the selector and declaration block together form a style rule. One rule can affect every matching h1 element, so changing 36px to 48px updates them consistently. section 1.19 section 1.21
Declarations can live in an internal style sheet between style tags or directly in an element's style attribute. Inline declarations affect only that element; grouped declarations can style many matching elements at once. section 7.4 section 1.21
<style>
selectorA { #3 #2
propertyA1: valueA1; #1
propertyA2: valueA2; #1
... #3
} #2
selectorB { #4
propertyB1: valueB1; #4
propertyB2: valueB2; #4
... #4
} #4
...
</style>
Use this syntax map to see how declarations sit inside declaration blocks and style rules. section 7.4
Try it: write a rule for h2 with a 30px font size and right alignment. Indent each declaration so your styling instructions are easy to scan. section 1.21
