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!

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>