Question

My understanding about CSS is that, generally if you set <div style="color: Red">, all content inside <div> will be affected. However if you put a html button inside, the color on the words on the button is not affected. I’m a bit disturbed by this exception. How do I give a reasonable explanation to it?

Answer 1

The “cascading” part of “Cascading Style Sheets” (CSS) means that in general, you’re right: a property set on an object will cascade down to objects below it.

However for some properties this doesn’t make sense, so those properties are explicitly non-cascading (eg if you set a border on a div, you don’t want all its children to have borders as well).

If we were dealing with raw XML in our DOM, that’s where it would end. The colour would indeed cascade all the way down. However, we’re dealing with HTML, and HTML has some pre-existing conditions, exceptions and overrides. For example, a <div> always defaults to display:block; whereas a <span> will default to display:inline;.

Buttons and input fields have a lot of defaults and overrides, which is why they show up as buttons and input fields without you having to do loads of styling on them. This is also why they override the cascading effect of certain CSS rules, including color.

You can override the override by specifying inherit for the overridden styles. So if you want you button to take the red colour you specified previously, you would do something like this:

.mybutton {
    color:inherit;
}