Practice: Styling Your First Web Page


Now it is time to use what you have learned.

In this lesson, you will style your first complete web page using CSS.

What You Will Practice

You will practice:

  • Adding CSS to a page
  • Using basic selectors
  • Applying common properties
  • Writing clean and readable code

Step 1: Create the Project Files

Create two files:

  • index.html
  • style.css

Step 2: Add Basic HTML Content

Start with a simple HTML page structure.

This page works, but it has no style yet.

Step 3: Create Your CSS File

Open style.css and start adding styles.

Now your HTML file is connected to CSS.

Step 4: Add Your First Styles

Use the properties you learned earlier.

Your page now looks cleaner and more professional.

Step 5: Improve Readability

Use spacing and clear colors to make content easy to read.

What You Have Achieved

You have:

  • Created your first styled web page
  • Used CSS selectors and properties
  • Written clean CSS code

Why This Practice Matters

Practice builds confidence.

The more you style pages, the better you become.

Why This Matters for Jobs

Employers expect beginners to style pages confidently.

This practice prepares you for real frontend tasks.

Practice Task

Improve your page by:

  • Changing colors
  • Adding more text
  • Trying different fonts

Chapter Summary

In this chapter, you learned what CSS is, how it works with HTML, basic syntax, how to add CSS, and how to style your first page.

What You Will Learn Next

In the next chapter, you will learn about CSS selectors in more detail.