Highlights explainer

Aim of the puzzle: Add an ID to an HTML element to give it a unique style with CSS.

Walk through of solution: An ID is a unique string used to identify a specific HTML element. Think of it like giving an element a name. By giving the element an ID, you can then use CSS to select that element, and give it its own style.

For example, if you wanted to make all h1 elements red, except for one, which you wanted to be blue.

You can select all h1 elements in CSS like this:

h1 {
    color: red;
}

Then, in the HTML, add an ID to the element you want to make blue:

<html>
    <body>
        <h1>Hello</h1>
        <h1>My Name Is</h1>
        <h1 id='last-heading'>What</h1>
    </body>
</html>

Then select it in the CSS by putting the # symbol followed by the ID:

#last-heading {
    color: blue;
}

To solve this puzzle, add the ID 'highlight' to one of the p elements in the HTML.

Then, in the CSS, add a new ruleset with #highlight as its selector.
Finally, add a rule to this ruleset that sets the color property to rgb(255, 89, 94).

Sample code solution:

HTML

<html>
    <body>
        <h1>Main Heading</h1>
        <h2>Sub Heading</h2>
        <p>The paragraph tag creates a block of text. This is an example of what that looks like. </p>
        <h2>Sub Heading</h2>
        <p id='highlight'>The paragraph tag creates a block of text. This is an example of what that looks like. </p>
        <h2>Sub Heading</h2>
        <p>The paragraph tag creates a block of text. This is an example of what that looks like. </p>
    </body>
</html>

CSS

body {
  font-family: Helvetica, Arial, sans-serif;
  background-color: rgb(244, 247, 250);   
}

h1 {
  color: rgb(74, 144, 226);
}
 
h2 {
  color: rgb(30, 80, 105);
} 
  
p {
  color: rgb(30, 75, 95);
}

#highlight {
  color: rgb(255, 89, 94);
}

HTML Concepts: IDs, Elements, h1 and h2 Header elements, p element, body
CSS Concepts: Selectors, Selecting by ID, Selecting by Tag Type, color property, RGB colors