some of my CSS properties not working from .CSS file but when i try inline css it works fine am usin-CodePudding

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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>

  <section id="title">
    <div >
      <!-- Nav Bar -->
      <nav  style="padding: 0 0 4.5rem;">
        <a  href="" style="font-size: 2.5rem">tindog.</a>
        <button  type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>
        <div  id="navbarSupportedContent">
          <ul >
            <li >
              <a  href="">Contact</a>
            </li>
            <li >
              <a  href="">Pricing</a>
            </li>
            <li >
              <a  href="">Download</a>
            </li>
          </ul>
        </div>
      </nav>



      <!-- Title -->

      <div >
        <div >
          <h1 style="font-family: Montserrat; font-size: 3.5rem;  line-height: 1.5;">Meet new and interesting dogs nearby.</h1>
          <button type="button" ><i ></i> Download</button>
          <button type="button" ><i ></i> Download</button>
        </div>



        <div >
          <img  src="images/iphone6.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
  </section>


  <!-- Features -->

  <section id="features">
    <div >
      <div >
        <i ></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 >
        <i ></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 >
        <i ></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>

CodePudding user response：

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.

CodePudding user response：

Add Your Custom CSS After Bootstrap

@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>
 
  <!-- 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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <!-- css file link --> <!-- **Add Here Your Custom CSS** -->
  <link rel="stylesheet" href="/css/styles.css">
  <!-- 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/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>

  <section id="title">
    <div >
      <!-- Nav Bar -->
      <nav  style="padding: 0 0 4.5rem;">
        <a  href="" style="font-size: 2.5rem">tindog.</a>
        <button  type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>
        <div  id="navbarSupportedContent">
          <ul >
            <li >
              <a  href="">Contact</a>
            </li>
            <li >
              <a  href="">Pricing</a>
            </li>
            <li >
              <a  href="">Download</a>
            </li>
          </ul>
        </div>
      </nav>



      <!-- Title -->

      <div >
        <div >
          <h1 style="font-family: Montserrat; font-size: 3.5rem;  line-height: 1.5;">Meet new and interesting dogs nearby.</h1>
          <button type="button" ><i ></i> Download</button>
          <button type="button" ><i ></i> Download</button>
        </div>



        <div >
          <img  src="images/iphone6.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
  </section>


  <!-- Features -->

  <section id="features">
    <div >
      <div >
        <i ></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 >
        <i ></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 >
        <i ></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>