null_pointer null_pointer - 29 days ago 9
CSS Question

understanding cascading and css initial

So I have this

html


<div class="paragraphs">
<p class="first">Paragraph 1</p>
<p class="second">Paragraph 2</p>
</div>


Now if use css:

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

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

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


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?

Answer Source

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.