CSSmarkup~15 mins

What is CSS - Hands-On Activity

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

What is CSS

📖 Scenario: You want to make a simple webpage look nicer by changing colors and text style. CSS helps you do that.

🎯 Goal: Learn how to write basic CSS to change the color and font of a heading on a webpage.

📋 What You'll Learn

Create a CSS rule to change the color of a heading

Change the font style of the heading

Use a CSS selector to target the heading element

💡 Why This Matters

🌍 Real World

Web designers use CSS to make websites look attractive and easy to read.

💼 Career

Knowing CSS is essential for front-end web development jobs to create visually appealing websites.

Progress0 / 4 steps

Create a heading in HTML

Write an HTML heading <h1> with the text Welcome to CSS inside the <body> tag.

CSS




    
    
    CSS Example


     heading with text 'Welcome to CSS' here -->

Need a hint?

Use the <h1> tag inside the <body> to add a big heading.

Add a CSS style block

Inside the <head> tag, add a <style> block where you will write CSS rules.

CSS




    
    
    CSS Example
     block here -->


    Welcome to CSS

Need a hint?

The <style> tag goes inside <head> to hold CSS code.

Write a CSS rule to change heading color

Inside the <style> block, write a CSS rule that changes the color of the h1 heading to blue.

CSS




    
    
    CSS Example
    
        /* Add CSS rule to make h1 color blue */
    


    Welcome to CSS

Need a hint?

Use the selector h1 and set color: blue; inside curly braces.

Add font style to the heading

In the same CSS rule for h1, add a property to change the font family to Arial, sans-serif.

CSS




    
    
    CSS Example
    
        h1 {
            color: blue;
            /* Add font-family property here */
        }
    


    Welcome to CSS

Need a hint?

Add font-family: Arial, sans-serif; inside the h1 CSS rule.