Applying style to container doesn't apply to its child?

HTML-CSS
1

Q1. I’m confused about why applying style to a container doesn’t get applied to its child ?

Q2. which all properties gets propagated to its child and which once not ?

<div class="head-title">
        <p id="top-left-header">404 NOT FOUND</p>
</div>

Does not work

.head-title{
  text-transform: uppercase;
  font-family: Inconsolata, sans-serif;
}

Works

#top-left-header{
  text-transform: uppercase;
  font-family: Inconsolata, sans-serif;
}
2

I think this article will answer your questions. Cascade and inheritance - Learn web development | MDN

The TLDR answer is that not all styles will be automatically applied to the child. You could change the selector to head-title > p or you could update #top-left-header and specify:

text-transform:  inherit;
font-family: inherit;
1 Like
3

Both properties are inherited. If it doesn’t work for you I’m guessing something else is going on (specificity/cascade or whatnot).

If you want to check using the docs you can look at the “Inherited” information in the “Formal definition” section of the property on MDN.

Your best bet is the browser dev tools, they will always tell you what is going on. Learn to use them well, they are invaluable.

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.