RGB Colors

Part of the Styling with CSS section of Coddy's HTML journey — lesson 27 of 76.

In CSS, RGB colors are a way to specify colors using the rgb() functional notation. RGB stands for Red, Green, and Blue, and each color is represented by a value ranging from 0 to 255. By combining different intensities of these three primary colors, you can create a wide spectrum of colors.

Here's the basic syntax for using RGB colors in CSS:

selector {
    color: rgb(red, green, blue);
    background-color: rgb(red, green, blue);
}

For example:

p {
    color: rgb(255, 0, 0); /* Red */
    background-color: rgb(0, 255, 0); /* Green */
}

h1 {
    color: rgb(0, 0, 255); /* Blue */
}

.highlight {
    background-color: rgb(255, 255, 0); /* Yellow */
}

Challenge

Easy

You are given an HTML document with a heading (<h1>), a paragraph (<p>), and a division (<div>). Give background color and text color of your choice to all the elements on the page, use rgb() to do so.

The default colors won't be accepted!

Cheat sheet

RGB colors use the rgb() functional notation with values from 0 to 255 for red, green, and blue:

selector {
    color: rgb(red, green, blue);
    background-color: rgb(red, green, blue);
}

Examples:

p {
    color: rgb(255, 0, 0); /* Red */
    background-color: rgb(0, 255, 0); /* Green */
}

h1 {
    color: rgb(0, 0, 255); /* Blue */
}

.highlight {
    background-color: rgb(255, 255, 0); /* Yellow */
}

Try it yourself

<html>
<head>
    <title>RGB Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>