Skip to content
← Back to Community
Why can I not change the background color in this HTML/CSS file?
Profile icon
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
Profile icon
SuklaGupta
Profile icon
MadhusudanPraja
Profile icon
bramley
Profile icon
JLNascimento
Comments
hotnewtop
Profile icon
mwilki7

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

Profile icon
JLNascimento

Thank you very much @mwilki7!

Profile icon
Bookie0
body { background-color: color here; #dont forget the colen after the color }
Profile icon
NoelB33

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

Profile icon
Bookie0

Oh whoops @NoelBryan

Profile icon
JLNascimento

Thank you very much @Bookie0!

Profile icon
Bookie0

please mark this answer if it helped you :)

@JLNascimento

Profile icon
RohilPatel

Just add a background tag:

body { background: (color) }
Profile icon
JLNascimento

Thank you very much @RohilPatel!

Profile icon
jdadia

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

You can change the color portion, I just chose red.
Profile icon
JLNascimento

Thank you very much @jdadia!

Profile icon
xxpertHacker

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

Profile icon
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:

:root { background: #778899; }

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.

Profile icon
JLNascimento

Thank you very much @StudentFires!

Profile icon
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

Profile icon
JLNascimento

Thank you very much @bramley!

Profile icon
bramley

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