CSS Syntax & How Browsers Apply Styles

CSS Syntax: The Anatomy of a CSS Rule

Every stylesheet is a list of rules. Understanding CSS syntax is the single most important step in learning CSS, because every property, selector and feature builds on it.

A CSS rule has two parts: a selector and a declaration block.

• Selector - chooses which HTML elements to style (for example h1, .card, #header).
• Declaration block - curly braces containing one or more declarations.
• Declaration - a property and value pair ending with a semicolon.
• Property - the aspect you want to change (color, margin, font-size).
• Value - the setting you want (red, 20px, bold).

Syntax Rules to Remember

• Property and value are separated by a colon.
• Each declaration ends with a semicolon. The last one is optional, but always add it.
• Whitespace and line breaks are ignored, so you can format freely.
• Property names are case-insensitive, but the convention is lowercase kebab-case (background-color).
• An invalid declaration is ignored by the browser and does not break the rest of the file.

Types of Basic Selectors

At-Rules

Rules that begin with @ give the browser special instructions, for example @media (responsive design), @import, @font-face, @keyframes (animations), @layer (cascade layers) and @container (container queries).

How Browsers Apply Styles: The Rendering Pipeline

1. Parse HTML - the browser reads your HTML and builds the DOM (Document Object Model).
2. Parse CSS - it reads all stylesheets and builds the CSSOM (CSS Object Model).
3. Style calculation - it matches selectors to DOM nodes and computes the final value for every property (the render tree).
4. Layout - it calculates size and position of every box.
5. Paint - it draws pixels: colors, text, borders, shadows.
6. Composite - layers are combined on the GPU and displayed.

Because CSS blocks rendering (the browser will not paint until it has the CSS), keep stylesheets small and load them in the head.

The Cascade: Who Wins When Rules Conflict?

When more than one rule targets the same property of the same element, the browser resolves the conflict in this order:

1. Importance and origin - !important declarations and user/browser/author style origins.
2. Cascade layers - rules in later declared layers win over earlier ones (for normal declarations).
3. Specificity - the more specific selector wins.
4. Source order - if everything is equal, the last rule wins.

Specificity Explained

Specificity is a score made of three columns (ID, Class, Element), compared left to right.

Inline styles beat all normal selectors, and !important beats inline styles, so avoid !important except in rare, deliberate cases. The :where() pseudo-class has zero specificity and is a modern tool for writing easy-to-override defaults.

Inheritance

Some properties, mostly text-related ones such as color, font-family, font-size and line-height, are passed from parent to child automatically. Others, such as margin, border and padding, are not inherited. You can control this with the keywords inherit, initial, unset and revert.

Default Browser Styles (User Agent Stylesheet)

Every browser ships with a built-in stylesheet, which is why an unstyled h1 is big and bold and links are blue and underlined. Your CSS overrides it. Many developers use a small CSS reset (for example box-sizing: border-box) to start from a consistent base.

Common Mistakes

• Forgetting a semicolon, which breaks the next declaration.
• Missing closing braces, which can cause the following rule to be ignored.
• Using a dot or hash incorrectly (.class vs #id).
• Fighting specificity with !important instead of fixing selector structure.

Key Takeaways

• A rule = selector + declaration block of property: value pairs.
• Browsers build the DOM and CSSOM, then layout, paint and composite.
• The cascade uses importance, layers, specificity and source order.
• Inheritance passes some properties from parent to child.