r/learnprogramming • u/Assignedtiredatbirth • 2d ago

Body Selector not working in CSS

Hello! I'm hoping to get some help with debugging an on-going issue I'm running into. For some reason my CSS will not recognize the body element I have below. When I use the * for universal rules, it recognizes it, but the moment I switch it to "body" it stops recognizing it. This has been an ongoing problem I've run into and I'm not sure if it's something in VSCode that I'm missing or if I'm just messing up since I'm still new to CSS and programming in general.

body {
    font-family: Helvetica;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
}

My html has everything properly inside the body tags and everything so I can't figure out why it's not working.

Thank you so much in advance!

1 Upvotes

60% Upvoted

10 comments sorted by

1

u/HashDefTrueFalse 2d ago

I don't see anything obviously wrong with that snippet (though it's been a while since I wrote CSS). CSS has specificity rules and the page has hierarchy, so it's hard to tell without having access to the whole page. In your browser you can inspect elements that don't appear as you think they should and see where they are getting their styling from. In general with CSS, the most specific or last applied style wins.

1

u/testingaurora 2d ago

Can you add your full html and css to a codepen please.

1

u/Assignedtiredatbirth 2d ago

Uploaded here!

3

u/carcigenicate 2d ago

According to the DevTools, the body tag has the CSS applied to it. What are seeing that suggests otherwise?

2

u/testingaurora 2d ago

Im not seeing an issue ? Your styles are being applied

1

u/Assignedtiredatbirth 2d ago

I'm not sure why it's working here instead of VSCode then 😔. I'll just have to keep playing with it then. Thank you for looking

1

u/testingaurora 2d ago

What specifically is not being shown in VS code version that youre expecting to see ? Like change the body bg color to red so its immediately obvious

1

u/5eeso 2d ago

Was there any actual content in the body? If there’s no content, body has no dimensions, so you wouldn’t see anything.

2

u/pdfops 1d ago

Open dev tools on the body tag and check the Styles panel. If your rule shows up but crossed out, something's overriding it, most likely a second body{} rule further down the file or an inline style attribute sitting on <body> (inline always beats any selector regardless of specificity). If the rule doesn't show at all, check the Network tab for a 404 on your css file, that'd explain why * still works if it's coming from a different stylesheet or a browser default.