HTML CSS problems

Tell us what’s happening:

Please help with the problem below;

// The div element with class green should have a background-color of green.

Your code so far


<style>
body {
  background-color: #FFFFFF;
}

.green {
  background-color: hsl(120, 100, 50);
}

.cyan {
  background-color: hsl(180, 100, 50);
}

.blue {
  background-color: hsl(240, 100, 50);
}

div {
  display: inline-block;
  height: 100px;
  width: 100px;

}
</style>

<div class= "green"></div>
<div class=hsl(180, 100, 50)></div>
<div class=hsl(240, 100, 50)></div>

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 7.0; Infinix X559C) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Mobile Safari/537.36.

Challenge: Adjust the Hue of a Color

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color

Read instruction carefully, go through examples again and try to understand them and the related concepts, examine your code carefully and also look for typing errors.

1 Like

Hi albayaanlilhaq, welcome!

background-color: hsl(120, 100, 50);

This is not the right way to use hsl().

<div class= "green"></div>
<div class=hsl(180, 100, 50)></div>
<div class=hsl(240, 100, 50)></div>

This is not how you set color with a class. The first line <div class="green"></div> is correct. It gives that div a class attribute of “green”. Then in your style tags you can set the background-color for all elements with class of “green”.

Thank.

I am through with the challenge.

Thanks.

Am through with this challenge.