0

Here is a sneak peak of a website clone I've been trying to do whilst wathing a tutorial. This is my webpage.

I need Bootstrap in my page and have included it from a CDN. Also, I noticed the earlier question and my Custom CSS File was over the Bootstrap file. However, I have to give !important to each CSS property I want to apply to my file.

Here is my HTML Code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TinDog - Online Dog Meeting Site</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Ubuntu&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>

<body>

  <section id="title">

<div class="topcontainer">
    <div class="container-fluid ">
      <!-- Nav Bar -->

      <nav class="navbar navbar-expand-lg navbar-dark topbar ">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
          <a class="navbar-brand" href="#">tinDog</a>
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a href="#" class="nav-link">Home</a>
            </li>
                      <li class="nav-item">
              <a href="#" class="nav-link">Login</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Sign up</a>
            </li>
          </ul>
        </div>
      </nav>



      <!-- Title -->
<div class="home-container">
      <div class="row">
        <div class="col-lg-6 ">
          <h1 class="dog-header">Meet new and interesting dogs nearby.</h1>
          <button type="button" class="btn btn-dark btn-lg download-btn"><i class="fab fa-google-play"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg  download-btn"><i class="fab fa-apple"></i> Download</button>
        </div>
        <div class="col-lg-6 ">
          <img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
    </div>
  </div>
  </section>
</body>
</html>

and below is my CSS code:

.topcontainer
{
  padding: 3% 15%;
}
#title
{
  background-color: #ff4c68;
}
.home-container{
  margin-top: 50px;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 3.5rem !important;
  line-height: 1.5 !important;
  color:white;
}

/*  Navabar Styling*/
.navbar
{
  padding: 0 0 4.5rem !important;
}

.navbar-brand
{
  font-family: 'Ubuntu', sans-serif;
  font-size: 2.5rem !important;
  font-weight: bold;
}
.nav-item
{
  padding: 0 18px;
  font-weight: 200;
  font-size: 1.2rem; 0

}
.nav-link:hover{
  border-bottom: 1px solid white;
  opacity: 100%;
}

/* Download Buttons */
.download-btn
{
  margin: 5% 3% 5% 0;
}

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

As you can see if I remove !important on CSS-property like font-size and line-height the CSS doesn't apply. What is going on ?

Community
  • 1
  • 1
Sanjay Sanjel
  • 1
  • Try changing the order of your css files that you have linked. Place the link for your css file at the last place. – Himanshu Apr 03 '20 at 19:10
  • This has to do with selector, your query already has an answer in another post, I hope you find this helpful: https://stackoverflow.com/a/27704409/9359123 – Prabin Poudel Apr 03 '20 at 19:36
  • @Himanshu Yes. I changed the position and it actually worked. I want to know why does it happens so ? Why delaring my custom CSS files after Bootstrap CDN link makes my CSS work and why not the other way around ? Thank you for your suggestion though. My code is fine and working ! – Sanjay Sanjel Apr 04 '20 at 07:09
  • @PrabinPoudel Thank you. I now understand the specificity of CSS selectors and why it seems that some properties gets applied and why some not. Thank you for your valuable comment. – Sanjay Sanjel Apr 04 '20 at 07:12
  • @SanjaySanjel As in the link mentioned by Prabin, when weights are equal, the styling that is applied later will always overwrite the previous one (unless you use `!important` ). The acronym itself (CSS) says "Cascading Style Sheet", i.e., it has a cascading effect on the styling applied in terms of order. – Himanshu Apr 04 '20 at 19:59
  • You should look into scss/sass, in this case you only really need to use a few of bootstrap's framework stylesheets to get your desired 'responsive' look. Bootstraps type, grid, columns, buttons, and forms are pretty cool and solidly styled, but there are so many css selectors which you could dump to lighten the load on your splash/contact pages. Checkout npm and sass. No more `!important` hacking, and a better understand the order of css selectors :-) – joshmoto Apr 05 '20 at 01:38

0 Answers0