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

Anyone have a work around for the following error?

“The CSS starter code has been edited or removed. Use the reset button to reset the puzzle.”

I’ve tried every possible combo - followed the above examples - still get the error.

Thanks

Hey there, try posting a screenshot of your code, and I’ll take a look.

-Ben

image

image

I have exact same issue.

Hey there @Doug and @MM91, your code looks fine to me.

Check if you have any browser extensions that can interfere with CSS on websites you visit. For example, a dark-mode browser extension that changes the color of elements on a page would prevent the puzzle from completing.

If you continue having issues, send in a bug report by clicking on the 3-dot menu button and selecting “Send Feedback”.

If you can determine that extensions are not the issue, try completing the puzzle in a different browser. If this solves the problem, please let me know.

Hope this helps! Thanks.
Ben

1 Like

Hey Ben,

I have Dark Reader - So disabling it corrected the issue.

Thanks so much for the help.

Cheers
Doug

1 Like

Same issue here but at “Time to Style” puzzle. Have sent Feedback

Resolved - I had taken out a line of code which was apparently needed!

Glad to hear you got past it!

I had the same problem, found that I was typing the CSS Code into the HTML code - Didn’t know they run separate to provide the same answer. So to clarify, type the HTML code in HTML and CSS Code in CSS- then your code will work.

It would be really amazing if you could implement a native dark theme into Grasshopper! I think millions of people would agree with me on that :stuck_out_tongue:

whats wrong with this

Hey there, I don’t see any issues in your CSS. What’s in the HTML tab?