Selector
The part before the braces. It chooses the elements. Example: .button.
Platform under construction
CSS Syntax
CSS syntax is small, but the mental model matters: selectors choose elements, declarations describe visual changes and the browser ignores broken pieces without stopping the page.
selector {
property: value;
}
CSS Basics
A CSS rule is a target plus a list of visual instructions.
A CSS rule starts with a selector. The selector tells the browser which elements you want to style. Inside curly braces you write declarations.
Each declaration contains a property, a colon, a value and usually a semicolon. The property says what you want to change. The value says how you want it changed.
CSS is forgiving. If one declaration is invalid, the browser usually skips that declaration and continues. That is helpful, but it also means mistakes can be quiet.
Property
The visual feature you want to change. Example: background.
Value
The setting for the property. Example: #8cffc1 or 1rem.
Rule block
The declarations between { and }.
Visual model
Make the invisible browser work visible.
CSS becomes easier when you can see the parts: what is selected, what is declared, what the browser loads and what the final interface receives.
.button { background: #8cffc1; color: #061018; }
Targets every element with class="button".
Starts the declaration block.
Changes one visual feature.
Ends the rule.
Examples
Good CSS is readable, intentional and easy to change.
Readable CSS syntax
.button {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 18px;
border-radius: 999px;
background: #8cffc1;
color: #061018;
}
Hard to scan and easy to break
.button{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:#8cffc1;color:#061018}
.button {
background #8cffc1;
color: #061018
}
Rules that matter
Use these rules before memorizing more properties.
Beginners often try to learn CSS by collecting declarations. That is backwards. Learn the decisions first, then the properties become much easier to remember.
Use one declaration per line
This makes CSS easier to scan, diff and debug.
Keep semicolons
The last declaration can work without one, but consistent semicolons prevent simple mistakes.
Format for future you
Whitespace does not change CSS behavior, but it changes how quickly you can understand it.
Know invalid declarations
A missing colon, unsupported value or typo can make one declaration disappear.
Do not memorize random snippets
Understand the pattern and you can read almost every CSS rule.
Let tools help
Formatters and DevTools can expose syntax mistakes quickly.
Production thinking
CSS quality shows up in trust, accessibility and speed of change.
Why does this matter?
Syntax is the grammar of CSS. If you understand the grammar, you can read unfamiliar CSS without panicking and debug problems instead of guessing.
Accessibility
A small syntax mistake can remove focus styling, contrast or layout. Always verify important states such as hover, focus and disabled.
Production note
Production CSS should be formatted consistently. A readable stylesheet is faster to review and safer to change.
SEO note
Valid CSS does not directly create rankings, but broken layout can hurt usability, conversion and perceived quality.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Change background to #62d5ff and run the preview.
- Break one declaration on purpose by removing the colon, then fix it.
- Add a new declaration: text-decoration: none;
Practice assignment
Do this before moving to the next lesson.
- Write a CSS rule for a .card selector.
- Use at least five declarations with clear formatting.
- Explain each property and value in plain language.
Try it yourself
Edit a rule and watch declarations change the result
Self-check
Before you continue, prove that you understand CSS Syntax.
Do not only read the lesson. Answer these questions out loud or write the answers in your own notes. CSS becomes real when you can explain what the browser is doing.
- Can you identify the selector in a CSS rule?
- Can you explain property versus value?
- Can you predict what happens when one declaration is invalid?
- Can you format a rule so another developer can read it quickly?
- Can you debug a missing visual change by checking syntax first?
Senior audit upgrade
Broken declarations usually fail quietly.
A missing unit, wrong property or invalid value does not stop the stylesheet. The browser skips the bad piece and keeps going, so DevTools must become part of the learning loop.
Missing unit
width: 320 is invalid, but width: 320px is valid. Numbers need units unless the property allows a unitless value.
Unknown property
A typo such as backgroudn is ignored. The rest of the rule still works, which makes the mistake easy to miss.
Invalid value
display: center is ignored because center is not a display value. Use DevTools to see crossed-out declarations.
.card {
width: 320; /* ignored: missing unit */
backgroudn: red; /* ignored: unknown property */
display: center; /* ignored: invalid value */
}