1) Core Pattern
selector {
property: value;
}
You must use all 3 parts: selector, property, and value. Keep braces and semicolons in place.
Create a New Program
Language: HTML/CSS only
Sign in to load projects.
Your Projects
| Title | Saves | Updated | Status | Grade | Late | Open | Rename | Delete |
|---|---|---|---|---|---|---|---|---|
| No projects loaded yet. | ||||||||
CSS Syntax Guide: Make It Work Every Time
CSS follows a strict pattern. If one part is missing, the browser can ignore the style rule.
2) Keys You Need
- Selector: targets what to style, such as p, .card, or #menu.
- Property: what changes, like color, margin, display, width.
- Value: the setting for that property, like #1d4ed8, 16px, flex.
- Semicolon: ends each declaration line.
- Curly braces: wrap all declarations for the selector.
3) HTML + CSS Link
<link rel="stylesheet" href="styles.css">
Put this line inside <head> in HTML so your CSS file actually loads.
4) Common Bugs
- Misspelled properties like widht instead of width.
- Class mismatch: .card-title in CSS but class="cardtitle" in HTML.
- Missing semicolon or closing brace in a rule block.
- Using # for a class or . for an id by mistake.