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

HTML-CSS
1

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?

2

hi there,
as we know css uses colors when we write: lightblue or lightgreen.
Can not find something that hits your question.
Here is a link to a whole bunch of lightcolors:
“<named-color> - CSS: Cascading Style Sheets | MDN”

Some lightcolors listed below:
|`lightblue`|`#add8e6`|| | --- | --- | --- | |`lightcoral`|`#f08080`|| |`lightcyan`|`#e0ffff`|| |`lightgoldenrodyellow`|`#fafad2`|| |`lightgray`|`#d3d3d3`|| |`lightgreen`|`#90ee90`|| |`lightgrey`|`#d3d3d3`|| |`lightpink`|`#ffb6c1`|| |`lightsalmon`|`#ffa07a`|| |`lightseagreen`|`#20b2aa`|| |`lightskyblue`|`#87cefa`|| |`lightslategray`|`#778899`|| |`lightslategrey`|`#778899`|| |`lightsteelblue`|`#b0c4de`|| |`lightyellow`|`#ffffe0`|

1 Like
3

thank you. lightpink works and lightgreen.

4

i guess it is not easy for the machine to just use a prefix as" light "to make the colour brighter, for every colour is different in the way it appears to us. So the machine must use fixed values for each of this named colours. And this may be the reason every " light "-colour has a own name instead.
Happy Coding

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.