“Light red” and “light green” background colors not working-CSS

[shivajikobardan]

TL;DR Summary

light red and light green background colors not working.

https://github.com/TheOdinProject/css-exercises/tree/main/foundations/02-class-id-selectors

I’m doing this assignment of The Odin Project. But the two colors aren’t working.
Here’s my code:
index.html:

<p class="odd">Number 1 - I'm a class!</p>
    <div ids="second">Number 2 - I'm one ID.</div>
    <p class="odd oddly-cool">Number 3 - I'm a class, but cooler!</p>
    <div id="four">Number 4 - I'm another ID.</div>
    <p class="odd">Number 5 - I'm a class!</p>

Style.css:

.odd{
    background-color: light red;
    font-family: Verdana, Dejavu Sans, sans-serif;
}
 
#second{
    color:blue;
    font-size:36px;
}
 
.oddly-cool{
    font-size:24px;
}
 
.four{
    background-color: light green;
    font-size:24px;
    font-weight: 700;
 
}

If I put rgb value, it will work though. So, what’s the issue? Doesnt’ background-color supports light as a value?

 

[jedishrfu]

Here's a list of HTML color codes:
https://htmlcolorcodes.com/color-names/

I think your problem is the space between the light and green.

It should be:

lightgreen

not

light green

 

[shivajikobardan]

thank you. lightpink works and lightgreen.

 

[pbuk]

<h1>It's not hard to start HTML code with a [code=html] tag.</h1>
<!-- It makes code much easier to read. -->
<p>
  <strong style="color: red">Don't be lazy</strong>, help others to help you.
  <small>You can also select HTML as the language in the "Insert code" dialog.</small>
</p>

/* It's not hard to start CSS code with a [code=css] tag.
 * It makes code much easier to read.
 * **Don't be lazy**, help others to help you.
 */
:root {
  --warning-color: rgb(255, 0, 0);
}
.warning {
  color: var(--warning-color);
}
 /*  You can also select CSS as the language in the "Insert code" dialog. */

 

[pbuk]

You should also use a modern code editor such as Visual Studio Code which will often highlight mistakes: this is what it looks like: