CSS syntax and rules - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the basic structure of a CSS rule?

A CSS rule has a selector followed by a declaration block inside curly braces. The declaration block contains one or more property: value; pairs.

beginner

What does a CSS selector do?

A CSS selector chooses which HTML elements the style rules will apply to.

beginner

How do you write a CSS property and value?

Inside the declaration block, write the property name, then a colon, then the value, and end with a semicolon. Example: color: blue;

beginner

Why are semicolons important in CSS declarations?

Semicolons separate each property-value pair. They tell the browser where one declaration ends and the next begins.

beginner

What happens if you forget the closing curly brace in a CSS rule?

The browser may ignore the rule or all following rules, causing styles not to apply correctly. Always close with }.

Which part of a CSS rule selects the HTML elements to style?

A Selector

B Property

C Value

D Declaration block

The selector chooses which HTML elements the styles apply to.

How do you separate multiple CSS declarations inside a rule?

A With semicolons

B With colons

C With commas

D With periods

Semicolons separate each property-value pair in CSS.

What symbol encloses the declarations in a CSS rule?

A Parentheses ()

B Square brackets []

C Curly braces {}

D Angle brackets <>

Curly braces {} contain the declarations in a CSS rule.

Which is the correct way to write a CSS declaration for text color blue?

A color; blue:

B color = blue;

C color - blue;

D color: blue;

The correct syntax is property: value; for example, color: blue;

What might happen if you forget the semicolon after a CSS declaration?

A The browser ignores only that declaration

B The browser ignores the whole rule or more

C The browser fixes it automatically

D Nothing, it still works fine

Missing semicolons can cause the browser to ignore the whole rule or subsequent declarations.

Explain the parts of a CSS rule and how they work together to style a webpage.

Think about how you tell the browser what to style and how.

Describe common mistakes in CSS syntax and how they affect the appearance of a webpage.

Consider what happens if the browser can't read your CSS properly.

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