Css not have expected result


I have a css style embedded in the page, but what confuses me is that my css style doesn’t seem to take effect

  button {
    background-color: red;

You can use inspector to look at the styling for what’s being rendered on the right. If you do that (ctrl+shift+i) and you inspect the buttons, you’ll find the background is being set to white via this class:

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;

In this case, your styling isn’t taking precedence over this custom class,

1 Like

@e.yeaw Thank you very much for answering my question,but this custom class has higher priority still confuse me.
Where should I go to learn more about prioritization issues

1 Like

You can learn about the css specificity hierarchy here (scroll down a bit to see all the rules)

1 Like

very good course, thank your very much
The tutorial is very detailed :grinning:



1 Like