CODEWITHSUNDEEP
htmlcss
Acoustic Orgasm
Acoustic Orgasm

Reputation: 11

Difference of setting the font-size on the div vs h1

What is the difference between setting some properties directly on the div container vs directly on the element in it. For example font-size:

<div class="the_last_of_us">
  <h5>Cookie Settings</h5>
</div>

Upvotes: 0

Views: 363

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157314

Major different between setting the font-size on div vs h1 or h5 in the above example is, setting the font-size will not be inherited by the h5 by default, as it will pick the styles from the User Agent Stylesheet, unless you explicitly define it to inherit, for example

h5 {
  font-size: inherit;
}

Whereas setting the font-size explicitly on the h5 will override the user agent stylesheet and set the font-size you have defined for the h5 element.

In other scenarios, it makes sense to set the properties on the Parent element, which will be inherited by a few elements. This will help you keep your selector specificity low. For example, setting color to the div can be inherited by the h1 element.

So instead of a selector with a property like

div h5 {
  color: #f00;
}

You can use

div {
  color: #f00; /* Also applies color to any element inside 
                  the div which can inherit color from the parent element */
}

Upvotes: 1

Related Questions