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

  • Thread starter Thread starter shivajikobardan
  • Start date Start date
  • Tags Tags
    Green
AI Thread Summary
The discussion centers around a coding assignment from The Odin Project, where a user encounters issues with CSS not applying the intended colors to elements. The user’s code includes a class for odd-numbered paragraphs and IDs for specific divs, but the background color for one class is not displaying correctly. The issue is identified as a syntax error: the user mistakenly used "light green" instead of the correct "lightgreen" for the background color. Additionally, the conversation emphasizes the importance of using a modern code editor like Visual Studio Code to catch such errors easily. The thread also briefly touches on the use of HTML and CSS formatting for clarity in code sharing.
shivajikobardan
Messages
637
Reaction score
54
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:

Code:
<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:
Code:
.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?
 
Technology news on Phys.org
thank you. lightpink works and lightgreen.
 
HTML:
<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>

CSS:
/* 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. */
 
  • Like
Likes Wrichik Basu
You should also use a modern code editor such as Visual Studio Code which will often highlight mistakes: this is what it looks like:
1667377191086.png
 
  • Like
Likes jedishrfu and Mark44
Dear Peeps I have posted a few questions about programing on this sectio of the PF forum. I want to ask you veterans how you folks learn program in assembly and about computer architecture for the x86 family. In addition to finish learning C, I am also reading the book From bits to Gates to C and Beyond. In the book, it uses the mini LC3 assembly language. I also have books on assembly programming and computer architecture. The few famous ones i have are Computer Organization and...
I have a quick questions. I am going through a book on C programming on my own. Afterwards, I plan to go through something call data structures and algorithms on my own also in C. I also need to learn C++, Matlab and for personal interest Haskell. For the two topic of data structures and algorithms, I understand there are standard ones across all programming languages. After learning it through C, what would be the biggest issue when trying to implement the same data...

Similar threads

Replies
7
Views
2K
Replies
5
Views
2K
Replies
2
Views
2K
Replies
3
Views
3K
Replies
4
Views
3K
Replies
20
Views
5K
Replies
1
Views
3K
Replies
5
Views
3K
Back
Top