CSSmarkup~30 mins

Role of CSS in web development - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Role of CSS in Web Development

📖 Scenario: You are creating a simple webpage to explain how CSS styles change the look of HTML content. This will help you see how CSS controls colors, fonts, and layout.

🎯 Goal: Build a basic HTML page and add CSS styles step-by-step to change the background color, text color, and font size of a heading.

📋 What You'll Learn

Create an HTML skeleton with a heading

Add a CSS variable for the main color

Use CSS to style the heading with the main color and font size

Add a background color to the page using CSS

💡 Why This Matters

🌍 Real World

CSS is used in every website to control how pages look. Learning to use CSS variables and selectors helps you create consistent and easy-to-change styles.

💼 Career

Web developers use CSS daily to design user-friendly and attractive websites. Understanding CSS basics is essential for frontend development jobs.

Progress0 / 4 steps

Create the HTML skeleton with a heading

Write the basic HTML structure with lang="en", charset="UTF-8", and a <h1> heading that says "Welcome to CSS Styling" inside the <body>.

CSS




    
    CSS Role

Need a hint?

Remember to include lang="en" in the <html> tag and add a heading inside the body.

Add a CSS variable for the main color

Inside the <head>, add a <style> block. Define a CSS variable called --main-color with the value #2a9d8f inside the :root selector.

CSS




    
    CSS Role
    
        /* Define --main-color variable here */
    


    Welcome to CSS Styling

Need a hint?

Use :root to define global CSS variables. Write --main-color: #2a9d8f; inside it.

Style the heading with the main color and font size

In the existing <style> block, add a CSS rule for h1 that sets color to var(--main-color) and font-size to 2.5rem.

CSS




    
    CSS Role
    
        :root {
            --main-color: #2a9d8f;
        }
        /* Add h1 styles here */
    


    Welcome to CSS Styling

Need a hint?

Use color: var(--main-color); and font-size: 2.5rem; inside the h1 selector.

Add a background color to the page using CSS

In the same <style> block, add a CSS rule for body that sets background-color to #e9f5f2.

CSS




    
    CSS Role
    
        :root {
            --main-color: #2a9d8f;
        }
        h1 {
            color: var(--main-color);
            font-size: 2.5rem;
        }
        /* Add body background color here */
    


    Welcome to CSS Styling

Need a hint?

Set background-color: #e9f5f2; inside the body selector.