CODEWITHSUNDEEP
javascripthtmlcss
Tech Solvr
Tech Solvr

Reputation: 505

Materialize css loading after my styles

My HTML code is like -

  <!DOCTYPE html>
  <html>
    <head>
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <!--Import Google Icon Font-->
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->       
    <link type="text/css" rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css"  media="screen,projection" />

        <link type="text/css" rel="stylesheet" href="css/style.css" media="screen,projection" />
    </head>

    <body>
        <div class="container"></div>

        <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="node_modules/materialize-css/dist/js/materialize.min.js"></script>      
    </body>
  </html>

As you can see my href="css/style.css" is after the href="node_modules/materialize-css/dist/css/materialize.min.css" but in browser materialize css is overriding my style.css Let me know what I am doing wrong here.

I applied btn_apply class on an anchor tag but somehow materialize classes/css are getting the priorities every time. Let me know how I can fix this.

image

Upvotes: 0

Views: 1216

Answers (2)

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

Just add .btn prefix to your .btn_apply class. It's overridden because button has multiple classes btn, disabled.

So your btn_apply should look like

.btn.btn_apply{  // <== prefix

 }


.btn{
  background: red;
  color: white;
}
.btn.btn_apply{
  background: blue;
}
.btn_apply{
  background: yellow;
}
<button class="btn">.btn</button><br>
<button class="btn btn_apply">.btn.btn_apply</button><br>
<button class="btn_apply">.btn_apply</button>

Upvotes: 1

Barmar
Barmar

Reputation: 781078

The style in materialize.min.css is taking priority because it matches two classes .btn.disabled, but your style only matches one class .btn_apply. Change yours to

.btn.btn_apply {
    ...
}

Then it will match the same number of classes, and take precedence because the file was loaded later.

Upvotes: 2

Related Questions