Menu
So basically I have a page that has it's own CSS. On my server I have a folder of different CSS style files, so I want to have a "preview" window on my page for them. Can I somehow, maybe using javascript, apply an external CSS file only to a certain DIV, not to the entire page so I can get a "preview" of the custom CSS file? I'd rather not use iframes.
926
Using the LINK Element We can use the XHTML element LINK to reference an external CSS file. This method will be recognized by many older browsers. Link the STYLE element; the LINK element needs the TYPE attribute to be "text/css", and the REL attribute to say "stylesheet" just in case!
It works kind of counter-intuitively, so just to explain further: inline styles override internal CSS, and internal CSS overrides external CSS files, and external CSS files override browser defaults. One way to think about it is like layers. The “closer” the style is to the element, the higher precedence it has.
To load CSS Files asynchronously in both Chrome and Firefox, we can use “preload” browser hint and “media='print'” attribute along with onload event feature in a ordered way. you may use the codes below to load CSS Files without render-blocking resources features in Firefox and Chrome.
Like Quentin said, you can use descendent selector to limit the scope. Something like less can help a lot. For example, I would like to have "bootstrap.css" applies only to #MyDiv, in "my.less":
#MyDiv {
@import "bootstrap.less";
}
"bootstrap.css" should be renamed (or linked) to "bootstrap.less". Run:
lessc my.less my.css
would add #MyDiv to every selectors in the imported file.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
