Ask coding questions

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

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!

Commentshotnewtop
mwilki7 (943)

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

Bookie0 (1600)
body {

   background-color: color here;   #dont forget the colen after the color

}
NoelBryan (258)

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

Bookie0 (1600)

please mark this answer if it helped you :)

@JLNascimento

RohilPatel (764)

Just add a background tag:

body {
background: (color)
}
jdadia (0)

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.
StudentFires (292)

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

StudentFires (292)

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.

bramley (154)

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

bramley (154)

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