Css Body Properties Not Inherited By H1 Tag

HTML:

The Amazing World of CSS

Sed ut perspiciatis unde omnis iste natus error sit

Solution 1:

Because h1 has some default styles, one of them is font-size which by default is 2em, so you need to set font-size in h1

Snippet

.pageStyle {
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 18px;
}
h1 {
  font-size: inherit /* or 18px */
}

<bodyclass="pageStyle"><h1>The Amazing World of CSS</h1><p><strong>Sed ut perspiciatis</strong> unde omnis iste natus error sit <em>voluptatem accusantium</em> doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo <strong>inventore veritatis et quasi architecto beatae</strong> vitae dicta sunt explicabo.
    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt. Learn more about CSS at the <ahref="http://www.w3.org/Style/CSS/">W3C CSS Home Page</a>.</p></body>

OP comment:

Ok, but isn't this style supposed to override it?

No it won't override because body is a parent. and the h1 default styles is being applying directly to the h1, so regards to specificity it is more specific

Further reading:

MDN CSS Specificity

Inheritance and cascade

CSS Specificity

Solution 2:

This has to do with CSS specificity. From Mozilla's docs:

The following list of selector types is by increasing specificity:

• Type selectors (e.g., h1) and pseudo-elements (e.g., :before).
• Class selectors (e.g., .example), attributes selectors (e.g. [type="radio"]) and pseudo-classes (e.g., :hover).
• ID selectors (e.g., #example).

Also note the !important exception:

When an important rule is used on a style declaration, this declaration overrides any other declarations....

In your case, since the browser has default styles for all elements, and these styles are defined on the element's name (h1, a, etc...), they have precedence over rules defined on parent elements or via CSS selectors, so your styles are not applied. See this screenshot showing the browser's default styles for h1:

Try changing your styles to target h2 or add the pageStyle class to h2 to see.

Share