HEX Colors

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

Hex colors are a way to specify colors using hexadecimal values. A hexadecimal color code is a six-digit code preceded by a hash symbol (#) that represents the amount of red, green, and blue light that makes up a color.

Each pair of digits in the code represents the intensity of one of these primary colors, ranging from 00 (no intensity) to FF (full intensity). Hex colors provide a wide range of color options and are widely used in web design.

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

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

For example:

p {
    color: #FF0000; /* Red */
    background-color: #00FF00; /* Green */
}

You can also use shorthand notation for hex colors when both digits in each pair are the same. For example:

p {
    color: #F00; /* Red (equivalent to #FF0000) */
    background-color: #0F0; /* Green (equivalent to #00FF00) */
}

Challenge

Easy

You are given an HTML document with two headings (<h1> and <h2>) and a paragraph (<p>). Your task is to use hexadecimal color codes for background colors. Follow the steps below:

Write a CSS rule for the <h1> element. Set the background color to electric purple using the hex color #BF00FF.
Write a CSS rule for the<h2> element. Set the background color to neon green using #39FF14.
Write a CSS rule for all the <p> elements. Set the background color to light gray using #D3D3D3.

Cheat sheet

Hex colors use a six-digit hexadecimal code preceded by a hash symbol (#) to specify colors. Each pair of digits represents the intensity of red, green, and blue light, ranging from 00 (no intensity) to FF (full intensity).

Basic syntax:

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

Example:

p {
    color: #FF0000; /* Red */
    background-color: #00FF00; /* Green */
}

Shorthand notation can be used when both digits in each pair are the same:

p {
    color: #F00; /* Red (equivalent to #FF0000) */
    background-color: #0F0; /* Green (equivalent to #00FF00) */
}

Try it yourself

<html>
<head>
    <title>HEX Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This heading has an electric purple background!</h1>
    <h2>This heading has a neon green background.</h2>
    <p>This paragraph has a light gray background.</p>
</body>
</html>