HTML H[1-6] taking default values from _type.scss

Question

I have a very straight forward HTML-CSS code. However, some CSS properties are being overridden. Here I have custom properties for the h1 tag, but upon inspecting, I see my defined properties are being overridden by some settings from _type.scss

When I uncheck font-family: inherit; my defined font-family value is used.

I am new to CSS, but I suspect this to be the case of CSS inheritance.

CSS File:

#title{
  background-color: #F4C2C2;
  color: #fff;
  padding: 3% 15%;
}
#features{
  text-align: center;
  padding: 3% 15%;
  background-color: white;
  position: relative;
  z-index: 1;
}
.body{
  font-family: 'Montserrat', sans-serif;
}

h1{
  color: black;
  font-family: 'Montserrat', sans-serif;
  font-size: 4.5rem;
  line-height: 1.5;
}

h2{
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem;
  line-height: 1.5;
  font-weight: 700;
}
h3{
  font-size: 1.3rem;
  line-height: 2;
}
p{
  line-height: 2;
  color: #8F8F8F;
}
.navbar{
  padding-bottom: 4.5rem;
}

.navbar-brand{
  font-family: 'Ubuntu';
  font-size: 2.5rem;
}
.nav-item{
  padding: 0 18px;
}
.nav-link{
  font-size: 1.2rem;
}
.download-button{
  margin: 5% 3% 5% 0;
}
.title-image{
  width: 50%;
  transform: rotate(25deg);
  position: absolute;
  right: 30%;
}
@media (max-width:1028px){
  .title-image{
    position: static;
    transform: rotate(0);
  }
}

.featurebox{
  padding: 5%;
}
.intropic{
  color: #F4C2C2;
  margin-bottom: 1rem;
}
.intropic:hover{
  color: #ff4c68;
}


#testimonials{

  text-align: center;
  background-color:#F4C2C2;
  color: #fff;
}
.testpic{
  border-radius: 50%;
  width: 15%;
  margin: 20px;
}
.testslide{
  perspective: 500px;
}

#press{
  background-color:#F4C2C2;
  padding-bottom: 3%;
  text-align:center;


}
.press-logo{
  width: 15%;
  margin: 20px 20px 50px;
}



.carousel-item{
   height:auto;
   padding: 7% 15%;
}
#pricing{
  padding: 100px;
  text-align: center;
}
.pricing-col{
  padding: 3%;

}

.card{
  margin: 0 3%;
}

HTML Code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TinDog</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="SHA-KEY" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;500&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="SHA-KEY" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="SHA-KEY" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="SHA-KEY" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="SHA-KEY" crossorigin="anonymous"></script>
  <!-- Fontawesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">


</head>

<body>
  <section id="title">
    <!-- Nav Bar -->
    <nav class="navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="">tindog</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Download</a>
          </li>
        </ul>
      </div>
    </nav>

    <!-- Title -->
    <div class="row">
      <div class="col-lg-6">
        <h1>Meet new and interesting dogs nearby.</h1>
        <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i>Download</button>
        <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-app-store-ios"></i>Download</button>
      </div>
      <div class="col-lg-6">
        <img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
      </div>
    </div>



  </section>


  <!-- Footer -->

  <footer id="footer">

    <p>© Copyright 2018 TinDog</p>

  </footer>




</body>

</html>

StepUp · Accepted Answer · 2021-04-18T19:50:16.120

Order of loading styles is very important. Generally the last rule takes precedence. CSS files are loaded in the order that they appear in the page. If a class is redefined in a CSS file, it will override the previous class statements.

You are loading your CSS styles firstly:

<link rel="stylesheet" href="css/styles.css">

Try to move loading of styles to the last place:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="SHA-KEY" crossorigin="anonymous">  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- Other code is omitted for the brevity --!>                  
<!-- Your styles should be loaded at the last place --!>
<link rel="stylesheet" href="css/styles.css">

If desired style will not be applied, then the rule of specificity will be applied. So try to add more specificity to your h1 element:

.row > .col-lg-6 > h1 {
    color: black;
    font-family: 'Montserrat', sans-serif;
    font-size: 4.5rem;
    line-height: 1.5;    
}

score 0 · Answer 2 · answered Apr 18 '21 at 19:50

You have CSS files for Bootstrap 4 and 5 as well as your own CSS files. In your head section, you’re loading bootstrap/4.0.0 and bootstrap@5.0.0-beta3. You only need one. Try starting with Bootstrap-4’s recommended template

And use one request for Google fonts.

<!doctype html>

Tin Dog

<link rel="preconnect" href="https://fonts.gstatic.com">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;500;700&family=Ubuntu:wght@300&display=swap" rel="stylesheet">

<!--<link rel="stylesheet" href="css/styles.css">-->
<style>
    #title {
        background-color: #F4C2C2;
        color: #fff;
        padding: 3% 15%;
    }

    #features {
        text-align: center;
        padding: 3% 15%;
        background-color: white;
        position: relative;
        z-index: 1;
    }

    .body {
        font-family: 'Montserrat', sans-serif;
    }

    h1 {
        color: black;
        font-family: 'Montserrat', sans-serif;
        font-size: 4.5rem;
        line-height: 1.5;
    }

    h2 {
        font-family: 'Montserrat', sans-serif;
        font-size: 3rem;
        line-height: 1.5;
        font-weight: 700;
    }

    h3 {
        font-size: 1.3rem;
        line-height: 2;
    }

    p {
        line-height: 2;
        color: #8F8F8F;
    }

    .navbar {
        padding-bottom: 4.5rem;
    }

    .navbar-brand {
        font-family: 'Ubuntu';
        font-size: 2.5rem;
    }

    .nav-item {
        padding: 0 18px;
    }

    .nav-link {
        font-size: 1.2rem;
    }

    .download-button {
        margin: 5% 3% 5% 0;
    }

    .title-image {
        width: 50%;
        transform: rotate(25deg);
        position: absolute;
        right: 30%;
    }

    @media (max-width:1028px) {
        .title-image {
            position: static;
            transform: rotate(0);
        }
    }

    .featurebox {
        padding: 5%;
    }

    .intropic {
        color: #F4C2C2;
        margin-bottom: 1rem;
    }

    .intropic:hover {
        color: #ff4c68;
    }


    #testimonials {

        text-align: center;
        background-color: #F4C2C2;
        color: #fff;
    }

    .testpic {
        border-radius: 50%;
        width: 15%;
        margin: 20px;
    }

    .testslide {
        perspective: 500px;
    }

    #press {
        background-color: #F4C2C2;
        padding-bottom: 3%;
        text-align: center;


    }

    .press-logo {
        width: 15%;
        margin: 20px 20px 50px;
    }



    .carousel-item {
        height: auto;
        padding: 7% 15%;
    }

    #pricing {
        padding: 100px;
        text-align: center;
    }

    .pricing-col {
        padding: 3%;

    }

    .card {
        margin: 0 3%;
    }
</style>

tindog Contact Pricing Download

    <!-- Title -->
    <div class="row">
        <div class="col-lg-6">
            <h1>Meet new and interesting dogs nearby.</h1>
            <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i>Download</button>
            <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-app-store-ios"></i>Download</button>
        </div>
        <div class="col-lg-6">
            <img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
        </div>
    </div>



</section>


<!-- Footer -->

<footer id="footer">

    <p>© Copyright 2018 TinDog</p>

</footer>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
-->

HTML H[1-6] taking default values from _type.scss

2 Answers2