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 */

Need a 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 */

Need a 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 */
}

Need a 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 */
}

Need a hint?

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