CODEWITHSUNDEEP
htmlcss
null_pointer
null_pointer

Reputation: 1849

understanding cascading and css initial

So I have this html with css

.paragraphs {
  color: orange;
  background-color: gray;
}

p.first {
  color: inherit;
  background-color: inherit;
}

p.second {
  color: initial;
  background-color: initial;
}
<div class="paragraphs">
  <p class="first">Paragraph 1</p>
  <p class="second">Paragraph 2</p>
</div>

Both have a background-color of gray but p.first would have a color of orange and p.second would have a color of black.

Why would background-color not go back to it's default state with background-color: initial; but color: initial; does?

Upvotes: 3

Views: 43

Answers (3)

Amin Jafari
Amin Jafari

Reputation: 7207

If you position your p elements outside of the parent, you can easily understand what's going on. DEMO

inherit means the same as the parent. initial means the default values which for background is transparent and for color is black.

Upvotes: 0

meavo
meavo

Reputation: 1042

The CSS you define to div.paragraphs is not inherited by p.first and p.second. It would if your CSS be like this:

p {
  color: orange;
  background-color: gray;
}

p.first {
  color: inherit;
  background-color: inherit;
}

p.second {
  color: initial;
  background-color: initial;
}

Now all paragraphs (<p> tags) will inherit. Paragraphs with a class first and second will overwrite these values with the ones given.

Upvotes: 0

lumio
lumio

Reputation: 7575

Because initial of background-color on a p-tag is transparent or none.

You can also see the computed style of your second p tag when inspecting the elements. There you will see that background-color has actually the value rgba(0, 0, 0, 0) which is the same as a transparent black.

There is a good article on quirksmode.org about inherit, initial and unset values.

Upvotes: 1

Related Questions