CODEWITHSUNDEEP
htmlcssyuicss-frameworksyui-pure-css
Beast_Code
Beast_Code

Reputation: 3247

CSS: Why does the style tags need to be included in the html with Pure CSS framework?

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>

Upvotes: 0

Views: 383

Answers (1)

Deryck
Deryck

Reputation: 7668

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).

Upvotes: 2

Related Questions