Techie BabajiLearn to Code. Build Real Skills.
CSS · Fundamentals

CSS Syntax

Every piece of CSS follows one simple pattern. Learn to read it and you can read any stylesheet in the world.

Beginner 5 min Lesson 2 of 26 Runnable examples
Before you start:Introduction to CSS
0/26 in CSS
On this page · 5 min · Beginner

On this page

  1. Learning objectives
  2. Explanation
  3. Syntax
  4. Code example
  5. Step by step
  6. Real-world use
  7. Common mistakes
  8. Best practices
  9. Remember this
  10. Practice exercise
  11. Mini quiz
  12. Related topics
  13. My notes
Reading time
5 min
Difficulty
Beginner
Updated
Oct 28, 2026

Related tutorials

Interview questions

Learning objectives#

  • Name the parts of a CSS rule
  • Write multiple declarations in one rule
  • Group selectors with commas
  • Use common units: px, rem, em, %, vw, vh

Explanation#

A rule = selector + declaration block. The selector chooses elements; the block { } holds declarations.

A declaration = property: value; — for example color: red; The property is what to change, the value is what to change it to.

Group selectors with a comma to give them the same styles: h1, h2, h3 { … }.

Units: px is a fixed pixel; rem is relative to the root font size (usually 16px), so 1.5rem = 24px; % is relative to the parent; vw/vh are percentages of the screen width/height.

Comments are written /* like this */ and are ignored by the browser.

Syntax#

CSS Illustrative
selector {
  property: value;
  property: value;
}

Code example: Rules, groups and units#

HTMLRules, groups and units Runnable
<style>
  /* Base text */
  body { font-family: sans-serif; font-size: 16px; }


  /* Grouped selectors share one rule */
  h1, h2 { color: #7c3aed; margin-bottom: 0.5rem; }


  .box {
    width: 50%;          /* half of the parent */
    padding: 1rem;       /* 16px */
    font-size: 1.25rem;  /* 20px */
    background: #ede9fe;
  }
  .banner { height: 20vh; background: #c4b5fd; }
</style>


<h1>Main heading</h1>
<h2>Sub heading</h2>
<div class="box">I am half as wide as the page.</div>
<div class="banner">I am 20% of the screen height.</div>
Expected output
Two purple headings, a light-purple box half the page wide, and a banner that is one-fifth of the window height.
Opens this example in the full playground

Step-by-step explanation#

  1. The comment explains the rule and does nothing else.
  2. h1, h2 applies the same colour and margin to both headings.
  3. .box uses % for width, so it shrinks with the page.
  4. rem values scale if the user increases their browser font size — good for accessibility.
  5. 20vh is always 20% of the visible window height.

Real-world use case#

Professional stylesheets use rem for font sizes and spacing so the whole site respects the user’s preferred text size.

Common mistakes#

Missing units

width: 200 does nothing. Every length except 0 needs a unit: width: 200px.

Space between number and unit

20 px is invalid. Write 20px.

Using = instead of :

color = red is invalid. Properties use a colon: color: red;

Best practices#

  • One declaration per line
  • End every declaration with a semicolon, even the last
  • Use rem for font sizes
  • Use comments to label sections of your stylesheet

Remember this#

selector { property: value; } — “who { what: how; }”.

rem = relative to root (html), em = relative to the element’s own font size.

0 needs no unit; everything else does.

Practice exercise#

Your task: Write one rule that gives all <h2> and <h3> elements a dark blue colour and 1.5rem bottom margin, plus a comment above it.

Need a hint?
Group the two selectors with a comma.
Show solution
CSS Illustrative
/* Section headings */
h2, h3 {
  color: #1e3a8a;
  margin-bottom: 1.5rem;
}

Mini quiz#

CSS Syntax quizMultiple choice Question 1 of 3

In color: red; what is “color”?

Score so far: 0/0

Want more? Practise all CSS MCQs · CSS interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.