Why isn’t my body CSS selector applying?
Asked by
MellowCedar42
I'm new to CSS and having an ongoing issue where styles applied with the universal selector (*) work, but the same styles stop applying when I target the body element directly. For example:
body {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
All of my HTML content appears to be inside the body tags, so I'm not sure whether I'm making a CSS mistake or missing something in my editor. What should I check to figure out why the body rule isn't taking effect?
Answers
The full HTML and CSS would be needed to identify the exact cause. Check for duplicate body rules, inline styles on the body or its children, incorrect stylesheet paths, and CSS syntax errors earlier in the file. Developer tools will show both whether the rule was loaded and which declaration ultimately won.
Reply to this answer
Make sure there’s actually visible content inside the body when testing. A selector can apply correctly even if there’s nothing on the page that makes the change obvious. Also remember that styles on child elements can override inherited properties such as font, color, and text alignment. The body background is a special case and generally paints the page canvas, so inspect the element directly rather than relying only on what you see visually.
Reply to this answer
That CSS rule looks valid by itself. The most likely issue is that another rule is overriding it, or the stylesheet isn’t being loaded as expected. Open your browser’s developer tools, select the body element, and inspect the Styles panel. If your rule appears crossed out, another declaration is winning because it’s more specific or appears later in the stylesheet. If it doesn’t appear at all, check that the CSS file is linked correctly and loaded without a 404 error.
Reply to this answer
Add your answer
Answers are reviewed before publication.
Related Discussions