CSS: Why does the style tags need to be included in the html with Pure CSS framework?
Question
Why do the style tags need to be included in the HTML with Pure CSS framework? The documentation has it too http://purecss.io/buttons/ I'm looking at the section "Colored buttons with rounded corners: Success Button"
(look in this Codepen - in bottom left click on edit pen)
notice is you uncomment the style tags in html it works? why can't it pick it up from the css file?
<style scoped>
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65); /* this is a green */
}
.button-error {
background: rgb(202, 60, 60); /* this is a maroon */
}
.button-warning {
background: rgb(223, 117, 20); /* this is an orange */
}
.button-secondary {
background: rgb(66, 184, 221); /* this is a light blue */
}
</style>
<div>
<button class="button-success pure-button">Success Button</button>
<button class="button-error pure-button">Error Button</button>
<button class="button-warning pure-button">Warning Button</button>
<button class="button-secondary pure-button">Secondary Button</button>
</div>
1 answers
solution1
2 ACCPTED 2014-01-25 05:32:51
CSS rules are assigned based on the order in which they are loaded. You put the Yahoo Pure CSS file loading inside the <body> of that CodePen but the CSS you have typed in the CSS section is loaded before it (in the <head> ). This lets the later one overwrite it, reverting the settings to their defaults.
Just load the pure file before the other files (but after fonts of course).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.