CSS syntax and rules - Mini Project: Build & Apply

Learn CSS Syntax and Rules by Styling a Simple Webpage

📖 Scenario: You want to make a simple webpage look nice by adding colors and spacing using CSS. You will write CSS code step-by-step to style a heading and a paragraph.

🎯 Goal: Build a CSS stylesheet that changes the heading color to blue, sets the paragraph text color to dark gray, and adds spacing around the paragraph.

📋 What You'll Learn

Use correct CSS syntax with selectors and declarations

Write CSS rules with property and value pairs ending with semicolons

Apply styles to HTML elements using element selectors

Add margin and padding to create space around elements

💡 Why This Matters

🌍 Real World

Styling webpages with CSS is how websites get their colors, spacing, and layout to look nice and readable.

💼 Career

Knowing CSS syntax and rules is essential for web developers and designers to create visually appealing and user-friendly websites.

1

Create CSS rule to color the heading

Write a CSS rule that selects the h1 element and sets its color property to blue. Use correct CSS syntax with curly braces and a semicolon.

CSS

/* Write CSS rule for h1 color blue */

/* Your code here */

Hint

Remember CSS rules start with a selector, then curly braces, then property: value; pairs.

2

Add CSS rule to color the paragraph text

Add a CSS rule that selects the p element and sets its color property to #333333 (dark gray). Use correct syntax with curly braces and semicolon.

CSS

h1 {
    color: blue;
}

/* Write CSS rule for p color #333333 */

/* Your code here */

Hint

Use the p selector and set color to #333333.

3

Add margin to the paragraph

Add a margin property to the p CSS rule with the value 1rem to create space outside the paragraph.

CSS

h1 {
    color: blue;
}

p {
    color: #333333;
    /* Add margin 1rem here */
    /* Your code here */
}

Hint

Inside the p rule, add margin: 1rem; to add space outside the paragraph.

4

Add padding to the paragraph

Add a padding property to the p CSS rule with the value 0.5rem to create space inside the paragraph.

CSS

h1 {
    color: blue;
}

p {
    color: #333333;
    margin: 1rem;
    /* Add padding 0.5rem here */
    /* Your code here */
}

Hint

Inside the p rule, add padding: 0.5rem; to add space inside the paragraph.

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