Materialize overwriting local CSS

I moved main.css below materialize, but it still seems to be overwriting my main.CSS

If I force it off, I get the results I was expecting…

HTML

<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>pianoMACHINE</title>
  <meta name="description" content="remember when we all skinned our music players?">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <!-- Place favicon.ico in the root directory -->
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  <!--  Essential META Tags -->
  <meta property="og:title" content="pianoMACHINE">
  <meta property="og:description" content="remember when we all skinned our music players?">
  <meta property="og:image" content="https://github.com/TurtleWolf/Responsive-Web-Design_-_Technical-Document/blob/master/CapturePreview.PNG?raw=true">
  <meta property="og:url" content="https://turtlewolf.github.io/Responsive-Web-Design_-_Technical-Document/">
  <meta name="twitter:card" content="summary_large_image">

  <!--  Non-Essential, But Recommended -->
  <meta property="og:site_name" content="TurtleWolfe.com">
  <meta name="twitter:image:alt" content="TurtleWolfe.com">

  <!--  Non-Essential, But Required for Analytics -->
  <meta property="fb:app_id" content="your_app_id" />
  <meta name="twitter:site" content="@website-TurtleWolfe">

  <link rel="stylesheet" href="css/normalize.css">
  <script src="js/vendor/modernizr-2.8.3.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
    crossorigin="anonymous">
  <link rel="stylesheet" href="css/main.css">
</head>

<body id="body">
  <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
  <div class="container">
    <div class="row">
      <div class="col s12">
        <div id="main" class="card">


          <div class="card-action">
            <input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
            <h2 id="task-title">asdfg</h2>
            <ul class="collection">
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    A
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="A" loop controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\ArabWham(SPN).mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    S
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="S" loop controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\CrazyTown(SPN).mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    D
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="D" loop controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\DooSoul(SPN).mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    F
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="F" loop controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\DoYoThang(SPN).mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    G
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="G" loop controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\HipHOP_Bap006.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    H
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="H" loop controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\K.I.S.S.(SPN).mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    J
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="J" loop controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\Pimpish(SPN).mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    K
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="K" loop controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\Rhodes(SPN).mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    L
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="L" loop controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\Teflon(SPN).mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
            </ul>
          </div><!-- backloops on the right collumn -->

          <div class="card-action">
            <input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
            <h2 id="task-title">Word on the Street, Chattanooga TN</h2>
            <ul class="collection">
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    a
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="a" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/a1.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    s
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="s" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/a1s.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    d
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="d" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/b1.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    f
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="f" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/c1.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    g
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="g" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/c1s.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    h
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="h" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/c2.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    j
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="j" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/d1.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    k
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="k" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/d1s.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
              <li class="collection-item">
                <p>
                  <label for="t-rex-roar-loop">
                    l
                  </label>
                  <br />
                  <!-- This time we use the source element instead of the src attribute -->
                  <audio id="t-rex-roar-loop" data-sound-id="l" controls>
                    <source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/e1.mp3?raw=true" />
                    Your browser does not support the <code>audio</code> element.
                  </audio>
                </p>
                <a href="#" class="delete-item secondary-content">
                  <i class="fa fa-remove"></i>
                </a>
              </li>
            </ul>
          </div><!-- accent beats on the left collumn -->


        </div>
      </div>
    </div>
  </div>
  <footer>
    <a href="https://github.com/TurtleWolf/Responsive-Web-Design_-_Technical-Document/" rel="link">source code on
      github.io</a><br />
    <a href="https://turtlewolfe.com/" rel="link">Copyright 2018, TurtleWolfe.com</a>
  </footer>
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <script src="app.js"></script>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-125846162-2"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'UA-125846162-2');
  </script>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-125846162-2"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'UA-125846162-2');
  </script>
</body>

</html>

CSS

* {
  box-sizing: border-box;
}
*:before,
*:after {
  box-sizing: border-box;
}
html,
.card-action {
  color: yellow;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
  height: 100%;
  position: relative;
  background: url(https://github.com/TurtleWolf/pianoMACHINE/blob/master/ChattanoogaBridge.jpg?raw=true)
    no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.collection-item {
  background-color: rgba(117, 190, 218, 0.5); /* 50% transparent */
}
a {
  color: yellow;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
}
#backColor-container {
  background-color: rgba(0, 0, 100, 0.6);
}
#head-container {
  display: flex;
  flex-direction: reverse;
  width: 100%;
}
#navbar {
  left: 0px;
  width: 49%;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  border: 1mm ridge rgb(333, 333, 333, 0.6);
} /* navbar */
header {
  font-size: 2.5em;
  text-align: right;
  float: right;
}
#main-doc {
  margin-top: 20%;
  margin-left: 8%;
  width: 55%;
  border: double #32a1ce;
  padding: 4%;
}
p {
  color: yellow;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
  height: 100%;
  position: relative;
  background: url(https://github.com/TurtleWolf/pianoMACHINE/blob/master/ChattanoogaBridge.jpg?raw=true)
    no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
code {
  background-color: #1565c0;
  font: Inconsolata;
  color: white;
}
@media (max-width: 1250px) {
  /* @media (width <= 30em) {....}  */
  section {
    margin-top: 15px;
    border: 1mm ridge rgb(333, 333, 333, 0.6);
  }
} /* end of media query 1250px */
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: url(https://github.com/TurtleWolf/Responsive-Web-Design_-_Technical-Document/blob/master/800px-Joy_Oil_gas_station_blueprints.jpg?raw=true)
    no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Your screen captures have some of the left side cropped off, but it looks like it might not be a matter of sequential rules overwriting previous rules, but a matter of more specific selectors overriding sequential rules.

Try calling in your custom CSS file after the material CSS file and use the same selector used in materialize in your main CSS file

1 Like

Yes it’s a specificity issue and you must use the same weight in your main css as has been used in your other css file or the original rule wins out.

In simple terms if you have a rule that is addressed by multiple classes/ids then you can only override it by using the same format that follows later in the cascade (don’t be tempted to use !important either).

e.g. .collection .collection-item {}

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.