Custom Style explainer

The aim of this puzzle: Use an id to set the style of one specific HTML element
Walkthrough of the solution: In this puzzle, you’ll add an id, b, to the third h1 element. Then, you’ll add a new CSS ruleset for #b and set its color to blue.

The id attribute assigns an id to a specific element. For example, the code below assigns the id r to a specific h1 element:

<h1 id='r'>red</h1>

Once you’ve assigned an id to a specific element, that id can’t be used on any other elements. An id can only be used one time in an HTML document.

Once an element has an id, it can be selected in CSS by using the # symbol followed by the id. For example:

#r {
  color: red;
}

The code above selects the element with the id r and sets its color to red.

To complete the puzzle, inside the HTML, add the id 'b' inside the opening <h1> tag on the line <h1>blue</h1>. Then, inside the CSS, add a new ruleset with the selector #b. Set its color to rgb(0, 0, 255).

Sample code solution:
(Tap below to reveal)

HTML

<html>
    <body>
        <h1 id='r'>red</h1>
        <h1 id='g'>green</h1>
        <h1 id='b'>blue</h1>
    </body>
</html>

CSS

body {
    background-color: snow;
}

h1 {
    color: black;
}

#r {
    color: rgb(255, 0, 0);
}

#g {
    color: rgb(0, 255, 0);
}

#b {
    color: rgb(0, 0, 255);
}

HTML Concepts: <html>, <body>,<h1>, HTML element, , id attribute
CSS Concepts: CSS Selectors, Ruleset, Rules