CSS Tutorial
CSS Syntax
A rule is a selector plus a declaration block. Properties and values sit inside curly braces. Miss a semicolon and the next declaration may be eaten.
A rule has two parts
Every CSS rule answers two questions. The selector says which elements to paint. Thedeclaration block — the curly braces — says how they should look.
Read a rule left to right: pick the elements, open a brace, list the styles, close the brace. That is the whole language at this scale.
Example
<style>
h1 {
color: teal;
}
</style>
<h1>Area = 12 m²</h1>
<p>4 m × 3 m</p>h1 is the selector. color: teal; is one declaration inside the block. The paragraph stays the browser default because no rule targets p yet. The formula is still HTML; CSS only painted the title.
Property, value, semicolon
A declaration is a property, a colon, a value, and a semicolon. The property is the name of the style. The value is what you set it to. The semicolon ends that declaration so the next one can start.
| Piece | In the example | Job |
|---|---|---|
| Selector | p | Which elements |
| Property | color | What to change |
| Value | #0284c7 | The new setting |
| Semicolon | ; | End of that declaration |
Example
<style>
p {
color: #0284c7;
}
</style>
<h1>Harbor studio</h1>
<p>Open 8–16.</p>Click Try it in CSS under an example. That opens /css/try — a live page with a stylesheet pane.
Multiple declarations
One block can hold many declarations. Put each on its own line. End every declaration with a semicolon, including the last one. A missing semicolon makes the next line attach to the previous value, and both styles fail.
Example
<style>
h1 {
color: teal;
font-size: 1.75rem;
letter-spacing: 0.02em;
}
p {
color: #475569;
font-size: 1rem;
}
</style>
<h1>Harbor studio</h1>
<p>Open 8–16.</p>Two rules can live in the same stylesheet. The heading rule and the paragraph rule do not fight unless they target the same element and the same property.
Whitespace is flexible
Spaces, tabs, and line breaks between tokens do not change the meaning. Browsers ignore extra whitespace around selectors, colons, and braces. Use it to keep rules readable: selector, space, opening brace, each declaration indented, closing brace on its own line.
A one-line rule such as h1 { color: teal; } is the same as the indented block in the example above. Prefer the indented form. The cramped one is legal and miserable to edit.
CSS is not picky about spaces. It is picky about colons, semicolons, and matching braces. A stray} can swallow the rest of the file.
Bad declarations are skipped
A typo does not crash the page. The browser drops the declaration it cannot parse and keeps the rest of the rule. That is helpful when you experiment and easy to miss when a color never appears.
Example
<style>
h1 {
colour: navy;
color: teal;
font-size: 1.6rem;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<p>Open 8–16. The heading is teal — colour is not a CSS property.</p>British spelling colour is ignored. So is a missing colon. Check the property name in the preview: if nothing changed, the declaration probably never applied.
What to remember
Selector, braces, property, colon, value, semicolon. That pattern repeats for every chapter after this one. Next you will pick elements with more than a tag name — classes, ids, and a first look at attributes.
- One selector, one block, as many declarations as you need
- End each declaration with
; - Whitespace is for humans; punctuation is for the browser
- Unknown properties are skipped, not errors on the page
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Maths
One rule, two declarations
A rule is selector plus braces. Inside, each declaration is property, colon, value, semicolon. Miss the semicolon and the next line may be eaten.
h1 here is every h1 on the page. The area 12 m² is still in the HTML. CSS only sets colour and size.
A = w × h
Example
<style>
h1 {
color: #3730a3;
font-size: 1.4rem;
}
</style>
<h1>Area = 12 m²</h1>
<p>4 m by 3 m</p>Chemistry
A selector that misses on purpose
p { } does not paint h1. The selector is a filter. If the heading stays black, you targeted the wrong element, not a broken colour.
Example
<style>
p { color: #166534; }
</style>
<h1>H2SO4</h1>
<p>Corrosive — goggles on.</p>