HTML for Kids · Lesson

Colors and Backgrounds

Add colors and backgrounds to make your page pop.

Colors and Backgrounds is a free HTML for Kids lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML for Kids learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

1

Colors and Backgrounds

Welcome to the next lesson! Today, we’ll learn how to add colors and backgrounds to your web page to make it more vibrant and visually appealing.

2 Why Use Colors and Backgrounds?

Colors and backgrounds can:

Make your web page more attractive.
Highlight important content.
Set the mood or theme of your page.

Let’s learn how to use them effectively!

3 Changing Text Color

You can change the color of text using the color property. You can use:

Color names: Example: red, blue.
Hex codes: Example: #ff0000, #0000ff.
RGB values: Example: rgb(255, 0, 0).

Example:

<p style="color: red;">This text is red.</p>
<p style="color: #0000ff;">This text is blue.</p>
<p style="color: rgb(0, 128, 0);">This text is green.</p>

4 Adding Background Color

The background-color property is used to change the background color of an element.

Example:

<p style="background-color: yellow;">This paragraph has a yellow background.</p>
<div style="background-color: lightgray; padding: 10px;">
  This is a box with a gray background.
</div>

5 Full Page Background

You can change the background color of the entire page by applying the background-color property to the <body> tag.

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This page has a light blue background.</p>
  </body>
</html>

6 Adding Background Images

You can set an image as the background using the background-image property.

Example:

In this example:

background-size: cover; makes the image cover the entire page.
background-repeat: no-repeat; prevents the image from repeating.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: url('background.jpg');
        background-size: cover;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This page has a background image.</p>
  </body>
</html>

7 Combining Text and Background Colors

You can combine text and background colors to create visually appealing designs. Make sure the text is readable!

Example:

<p style="color: white; background-color: black; padding: 10px;">
  This is white text on a black background.
</p>

8 Try It Yourself

Let’s create a web page with colors and backgrounds. Here’s an example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lavender;
      }
      h1 {
        color: darkblue;
      }
      p {
        background-color: lightyellow;
        padding: 10px;
        border: 1px solid darkgray;
      }
    </style>
  </head>
  <body>
    <h1>My Colorful Page</h1>
    <p>This paragraph has a light yellow background with a border.</p>
  </body>
</html>

9

10 Great Job!

Congratulations! You’ve learned how to use colors and backgrounds to make your web pages more vibrant and visually appealing. In the next lesson, we’ll dive into text formatting to add bold, italic, and other effects to your text. Get ready to enhance your design skills!

Colors and Backgrounds — illustration 10

Frequently asked questions

Is the “Colors and Backgrounds” lesson free?

Yes — the full text of “Colors and Backgrounds” is free to read here on the web, and the HTML for Kids course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML for Kids course, upgrade to CoddyKit PRO.

What will I learn in “Colors and Backgrounds”?

Add colors and backgrounds to make your page pop. You practise HTML for Kids with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML for Kids?

No prior experience is required. HTML for Kids on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Colors and Backgrounds” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML for Kids lesson?

Yes. Every HTML for Kids lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML for Kids