I have free account on CodePen. In my code I use Bootstrap but I also override some Bootstrap classes in the CodePen CSS editor. In the head tag of HTML editor, I defined the loading order:
link rel="stylesheet" type="text/css" href="bootstrap.min.css" <br>
link rel="stylesheet" type="text/css" href="custom.css"
I.e. my custom.css I must override the Bootstrap classes. But it does not work in the CodePen editor. I have to use the !important rule to override Bootstrap classes too many.
The main thing is my code works perfectly in Google Chrome and Firefox without using the !important rule when I open custom.html on my local computer.
Why does not it work in the CodePen editor and why does it make such a big difference?
CodePudding user response：
It seems that the order is :
!important- inline style
<style>in the html part- style in the css part
- style in css settings.
If you want to avoid adding !important, you should add your link in the settings.
Go to the Settings -> css-> ->Add External Stylesheets/Pens -> add you css link -> save & close.