Issue
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.
Answered By - Sunderam
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.