CSS syntax and rules - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background color to blue.

CSS

body { background-color: [1]; }

Drag options to blanks, or click blank then click option'

Afont-size

Bblue

Ccolor

Dmargin

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name instead of a color value.

Leaving the value empty.

The property background-color sets the background color of an element. Here, blue is the correct value.

2fill in blank

medium

Complete the code to select all paragraphs.

CSS

[1] { color: red; }

Drag options to blanks, or click blank then click option'

Ap

B#paragraph

C.paragraph

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using class or id selectors instead of the tag selector.

Selecting a different element like div.

The selector p targets all paragraph elements in the HTML.

3fill in blank

hard

Fix the error in the CSS rule to properly set font size to 16 pixels.

CSS

h1 { font-size: [1]; }

Drag options to blanks, or click blank then click option'

A16

Bsize16

Cpx16

D16px

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving out the unit (like just '16').

Putting the unit before the number.

The font size value must include units like px to be valid. So 16px is correct.

4fill in blank

hard

Fill both blanks to create a CSS rule that sets margin to 10 pixels and padding to 5 pixels.

CSS

div { margin: [1]; padding: [2]; }

Drag options to blanks, or click blank then click option'

A10px

B5px

C10em

D5em

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing units between margin and padding.

Using units like em instead of px here.

Margin and padding values need units. Here, 10px margin and 5px padding set spacing in pixels.

5fill in blank

hard

Fill all three blanks to create a CSS rule that sets the font family to Arial, font weight to bold, and text alignment to center.

CSS

p { font-family: [1]; font-weight: [2]; text-align: [3]; }

Drag options to blanks, or click blank then click option'

AArial

Bbold

Ccenter

Dleft

Attempts:

3 left

💡 Hint

Common Mistakes

Using font weight values like numbers instead of 'bold'.

Choosing wrong text alignment like 'left' instead of 'center'.

This CSS rule sets the font family to Arial, makes the text bold with bold, and centers the text with center.

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