Ask coding questions

← Back to all posts
Why can I not change the background color in this HTML/CSS file?
JLNascimento

Hi guys!

Complete beginner here.
I am doing an exercise on learning the tools of HTML and CSS - in this case, how to change the color of the background from white to gray.
As a starting point I watched some YT tutorials and tried to replicate them, just changing colors.
However, despite basically copying the code I saw online, when I run my code it simply didn't work (background is still white).
Also, when I tried to add some other features (like stylizing an unordered list), it didn't work either.

Not sure if I didn't link the CSS file to the HTML properly or if it's something wrong with the code...

Could someone tell me what I did wrong?

Thx a lot!

Voters
SuklaGupta
MadhusudanPraja
bramley
JLNascimento
Comments
hotnewtop
mwilki7

the container needs content to show the background color, otherwise empty regions are blank

JLNascimento

Thank you very much @mwilki7!

Bookie0
NoelB33

A hashtag isn’t a comment in css, just saying @Bookie0

Bookie0

Oh whoops @NoelBryan

JLNascimento

Thank you very much @Bookie0!

Bookie0

please mark this answer if it helped you :)

@JLNascimento

RohilPatel

Just add a background tag:

JLNascimento

Thank you very much @RohilPatel!

jdadia

Input this basic HTML code [not in the style.css file, in index.html]:

<body style='background-color:red'></body> You can change the color portion, I just chose red.
JLNascimento

Thank you very much @jdadia!

xxpertHacker

@jdadia You should, absolutely, under no condition whatsoever, do that.

xxpertHacker

To target the background of the whole page, you want to target the "root" element of a page, the CSS selector for this is: :root.
So, what you're trying to do is this:

Also, this wasn't working because of the percentages, I never use them, they act unexpected at times.

To make something the size of the entire screen use vw and vh for width and height respectively.

JLNascimento

Thank you very much @StudentFires!

bramley

Hello! If you want to change the background of an entire webpage, in your CSS you should have:
html {
background-color: grey;
}
Your container doesn't actually have any content, but when you add some (and keep the current code), there will be a grey background around it.
Glad I could help,
Anthony

JLNascimento

Thank you very much @bramley!

bramley

@JLNascimento If it worked for you, you can mark the answer as correct