Intermediate
Fix a button fight with cascade layers
The Save button should be blue, but the base button style wins because body .btn (0, 1, 1) is more specific than .btn-primary (0, 1, 0).
Don't touch the selectors. Instead, declare two layers, base then components, put the body .btn rule in base and the .btn-primary rule in components. No !important.
What Check tests
- The Save button is blue (#2563eb)
- The Save button text is white
- The Cancel button keeps the light gray base style
- The Save button keeps the base padding
- The rules are in at least two cascade layers
- The selectors are unchanged and there is no
!important
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.