CSS syntax and rules - Browser Rendering Trace

Render Flow - CSS syntax and rules

Read CSS file

↓

Parse selectors

↓

Parse declarations

↓

Match selectors to HTML elements

↓

Apply styles to matched elements

↓

Calculate computed styles

↓

Layout elements

↓

Paint pixels on screen

The browser reads the CSS file, understands which selectors apply to which HTML elements, applies the style rules, calculates final styles, and then draws the page.

Render Steps - 3 Steps

Code Added:color: red;

Before

[ box ]
  Hello

→

After

[ box ]
  Hello (red text)

The text color changes to red, making the text visually stand out in red.

🔧 Browser Action:Parses declaration, applies color style, triggers repaint

Code Sample

A red colored text inside a box with some margin around it and larger font size.

CSS

<div class="box">Hello</div>

CSS

.box {
  color: red;
  font-size: 1.5rem;
  margin: 1rem;
}

Render Quiz - 3 Questions

After applying step 2, what visual change do you see in the text?

A Text becomes larger

B Text color changes to blue

C Box gets a border

D Margin space appears around the box

Common Confusions - 3 Topics

Why doesn't my CSS rule apply to the element?

The selector might not match the element's class, id, or tag exactly. CSS selectors must match the HTML element precisely to apply styles.

💡 Check your selector spelling and the HTML element's attributes carefully.

Why does changing font-size sometimes move other elements?

Increasing font size changes the element's size, causing layout shifts because the browser recalculates space (reflow).

💡 Font size affects layout size, so expect nearby elements to move.

Why is margin not adding space inside my element?

Margin adds space outside the element, not inside. To add space inside, use padding instead.

💡 Margin = outside space; Padding = inside space.

Property Reference

Property	Value Format	Visual Effect	Common Use
color	color name, hex, rgb, etc.	Changes text color	Make text readable or styled
font-size	length units (rem, em, px)	Changes text size	Adjust text readability and emphasis
margin	length units (rem, em, px)	Adds space outside element	Separate elements visually
padding	length units	Adds space inside element border	Create breathing room inside elements
background-color	color values	Changes background color	Highlight or decorate elements
border	width style color	Adds border around element	Define edges or separate content

Concept Snapshot

CSS syntax uses selectors and declaration blocks. Selectors choose elements; declarations set properties and values. Properties like color, font-size, margin control visual style. Values must be valid units or keywords. Styles apply only if selectors match elements. Changing styles triggers browser reflow and repaint.

Practice

1. What is the correct order of parts in a CSS rule?

easy

A. Property, value, selector, curly braces

B. Selector, curly braces, property, value

C. Value, property, selector, curly braces

D. Curly braces, selector, property, value

Solution

1. Step 1: Understand CSS rule structure

   A CSS rule starts with a selector that chooses HTML elements to style.

2. Step 2: Identify the syntax order

   The selector is followed by curly braces { }, inside which property: value pairs define styles.

3. Final Answer:

   Selector, curly braces, property, value -> Option B

4. Quick Check:

   CSS rule = Selector + { property: value } [OK]

Hint: Remember: selector first, then braces with property:value inside [OK]

Common Mistakes:

• Putting property before selector
• Omitting curly braces
• Swapping property and value order

2. Which of the following is the correct CSS syntax to set text color to blue?

easy

A. color; blue:

B. color = blue;

C. color-blue;

D. color: blue;

Solution

1. Step 1: Identify property and value separator

   In CSS, properties and values are separated by a colon (:), not an equals sign or other symbols.

2. Step 2: Check correct syntax for color property

   The correct syntax is color: blue; with a colon and semicolon ending the statement.

3. Final Answer:

   color: blue; -> Option D

4. Quick Check:

   Property and value separated by colon : [OK]

Hint: Use colon : between property and value, end with semicolon ; [OK]

Common Mistakes:

• Using equals sign instead of colon
• Missing semicolon at end
• Swapping property and value order

3. What color will the text be in this CSS rule?

p { color: red; color: green; }

medium

A. Green

B. No color applied

C. Both red and green

D. Red

Solution

1. Step 1: Understand CSS property overriding

   When the same property appears multiple times, the last one takes priority.

2. Step 2: Identify which color is last

   The rule sets color: red; first, then color: green; which overrides red.

3. Final Answer:

   Green -> Option A

4. Quick Check:

   Last property value wins in CSS [OK]

Hint: Last property value overrides earlier ones [OK]

Common Mistakes:

• Thinking both colors apply simultaneously
• Choosing the first color instead of last
• Assuming no override happens

4. Find the error in this CSS rule:

h1 { font-size 20px; }

medium

A. Wrong selector name

B. Missing semicolon at end

C. Missing colon between property and value

D. Curly braces are missing

Solution

1. Step 1: Check property-value separator

   The property font-size must be followed by a colon before the value.

2. Step 2: Verify other syntax parts

   Curly braces are present, semicolon is optional if only one property, selector is correct.

3. Final Answer:

   Missing colon between property and value -> Option C

4. Quick Check:

   Property and value must be separated by colon : [OK]

Hint: Always put colon : between property and value [OK]

Common Mistakes:

• Forgetting colon after property
• Confusing semicolon necessity
• Misnaming selectors

5. You want to style all paragraphs inside a section with a blue background and white text. Which CSS rule correctly applies both styles?

hard

A. section p { background-color: blue; color: white; }

B. section, p { background-color: blue; color: white; }

C. section p { background-color = blue; color = white; }

D. section > p { background-color: blue; color: white }

Solution

1. Step 1: Select paragraphs inside section

   The selector section p targets all p elements inside any section.

2. Step 2: Use correct CSS syntax for multiple properties

   Properties must be separated by semicolons and use colon between property and value.

3. Step 3: Check option correctness

   section p { background-color: blue; color: white; } uses correct selector and syntax. section, p { background-color: blue; color: white; } styles both section and p separately, not only p inside section. section p { background-color = blue; color = white; } uses equals sign which is invalid. section > p { background-color: blue; color: white } uses child selector which only selects direct children, not all descendants.

4. Final Answer:

   section p { background-color: blue; color: white; } -> Option A

5. Quick Check:

   Descendant selector + correct syntax = section p { background-color: blue; color: white; } [OK]

Hint: Use descendant selector and colon with semicolon syntax [OK]

Common Mistakes:

• Using commas instead of spaces in selector
• Using equals sign instead of colon
• Confusing child selector > with descendant selector