How to override CSS in Material Design Lite(MDL) or any other CDN
TLDR(I understand )
just add an id and move your stylesheet to the bottom
For those that like stories…
So I had a super annoying problem where the drawer button would be overlapped with content
Yep… so I did what any other CS student or programmer would do. Delay everything until I found a solution :)
It only took me 1.5 hours but in the process I learned a few little hacks
Basically, when you are using a CDN, you cannot just simply override the style sheet. The browser will give preference to the style sheet with more specificificy(spelt wrong on purpose).
What the hell is specificity?
every selector has its own numerical ‘weight’:
- 100 points for IDs
- 10 points for classes and pseudo-classes
- 1 point for tag selectors and pseudo-elements
If you want to override, you got to hit the boss level and pass señor CDN, and the easiest way to do that is to give yourself a 100 point bonus by throwing in an overrides id.
You will also need to move your stylesheet to the bottom, so it is the last one read.
I tried both of these separately, and they didn’t work that way.
So to summarize…
- Wrap the area you want to change or the whole document with a custom id to override.
2. Move stylesheet to the bottom.
3. Bask in glory