Home some of my CSS properties not working from .CSS file but when i try inline css it works fine am using bootstrap 4 along with it

Questions

some of my CSS properties not working from .CSS file but when i try inline css it works fine am using bootstrap 4 along with it

byMR

February 26, 2022

whenever I am trying to give a class to an h1 or h3 or any img and try to edit in my style.css file it doesn’t make any changes but when I try inline CSS it works fine. am using bootstrap 4.

here I have added CSS inline that’s why it’s working but when I try to add CSS in style.css by targetting a class it doesn’t show effect.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
body {
  font-family: "Montserrat";
}

#title {
  background-color: #ff4c68;
  color: #fff;
}

.container {
  padding: 3% 15%;
}

p {
  color: #8f8f8f;
}


/* Navigation bar */

.navbar-brand {
  font-family: "Ubuntu";
  font-weight: bold;
}

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

.nav-link {
  font-family: "Ubuntu";
  font-size: 1.2rem;
  font-weight: bold;
}


/* Download buttons */

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


/* Title image */

.title-image {
  width: 60%;
  transform: rotate(25deg);
}


/* feature sectiom */

#features {
  padding: 7% 15%;
}

.feature-box {
  text-align: center;
  padding: 5%;
}

.icon {
  color: #ef8172;
  margin-bottom: 1rem;
}

.icon:hover {
  color: #ff4c68;
}


/* testimonial section */

#testimonials {
  padding: 7% 15%;
  text-align: center;
  background-color: #ef8172;
  color: #fff
}

#testimonial-image {
  width: 10%;
  border-radius: 100%;
  margin: 20%;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>tindog</title>
  <!-- css file link -->
  <link rel="stylesheet" href="/css/styles.css">
  <!-- font awsome kit -->
  <script src="https://kit.fontawesome.com/b5209fc970.js" crossorigin="anonymous"></script>
  <!-- bootstrap css link   -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- bootstrap js -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>

  <section id="title">
    <div class="container">
      <!-- Nav Bar -->
      <nav class="navbar  navbar-expand-lg navbar-dark" style="padding: 0 0 4.5rem;">
        <a class="navbar-brand" href="" style="font-size: 2.5rem">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" 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 style="font-family: Montserrat; font-size: 3.5rem;  line-height: 1.5;">Meet new and interesting dogs nearby.</h1>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fa-brands fa-google-play"></i> Download</button>
        </div>



        <div class="col-lg-6">
          <img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
  </section>


  <!-- Features -->

  <section id="features">
    <div class="row">
      <div class="feature-box col-lg-4">
        <i class="icon fa-solid fa-circle-check fa-4x"></i>
        <h3 style="font-family: Montserrat ; font-size: 1.5rem;">Easy to use.</h3>
        <p>So easy to use, even your dog could do it.</p>
      </div>

      <div class="feature-box col-lg-4">
        <i class="icon fa-solid fa-bullseye fa-4x"></i>
        <h3 style="font-family: Montserrat ; font-size: 1.5rem;">Elite Clientele </h3>
        <p>We have all the dogs, the greatest dogs.</p>
      </div>

      <div class="feature-box col-lg-4">
        <i class="icon fa-solid fa-heart fa-4x"></i>
        <h3 style="font-family: Montserrat ; font-size: 1.5rem;">Guaranteed to work. </h3>
        <p>Find the love of your dog's life or your money back.</p>
      </div>
    </div>

  </section>

  <!-- Footer -->

  <footer id="footer">

    <p>© Copyright TinDog</p>

  </footer>


</body>

</html>

>Solution :

This is not working because you have place bootstrap file after your file.That’s why your file ignored.

Place bootstrap file on the top,and your css file below boostrap’s file.

Maintain following order:

BootstrapFile
fontawesome file
Your css file
Just before closing body tags:
Bootstrap js file
Any third party js file
Your js file

By doing this, you are telling that do more preference to my files.