CODEWITHSUNDEEP
htmlcss
Brandon AV
Brandon AV

Reputation: 1

All elements inheriting <body>’s styles

I have a style designated for <body>, but I also have a style for all other elements: <h1>, <h2>, etc. However, all of the specific modifiers are still inheriting the <body>’s styles.

Here is the CSS for my <body>:

body {
  background-color: #333333;
  text-align: center;
  font-family: montserrat;
  color: white;
}

And here is the style for my <h1>:

.h1 {
  font-family: montserrat;
  font-style: normal;
  font-weight: 400;
  font-color: #000000
  font-size: 50px;
  text-align: left;
}

Despite the modifier, <h1> still comes out white. If I remove the color from the <body> style, then the color is also removed from <h1>. The text for <h1>is also not aligned left.

For some reason it also affects the footer even though that is outside of the <body> tag.

Upvotes: 0

Views: 705

Answers (1)

AuxTaco
AuxTaco

Reputation: 5171

You've put a dot in front of your h1 block, which makes it a class selector. That will apply to elements like <div class="h1">, which isn't what you want. Remove the dot to make it a type selector, which will match every <h1> on your page.

For some reason it also affects the footer even though that is outside of the <body> tag.

The <html> element doesn't allow any content outside of the <head> or <body>, so your browser is probably thinking "oh, this footer is supposed to be in the <body>; I'll just move it in there". That happens before the CSS is applied, so your body block is applied to the footer.

(Also, font-color isn't a CSS property, color is, and you're missing a semicolon after #000000.)

Upvotes: 2

Related Questions