CSS styling is not being applied to website

Question

I am making a website using Bootstrap 5 and the index.css properties are not being applied to index.html. When I hover over a service card the background is supposed to change which creates a transition effect. It is supposed to go from this to this . However, I believe there may be something wrong with the CSS linking to the HTML because when I try to change the background of the site to a random color the change doesn't appear on the site.

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
  background: #f1f2fa;
  font-family: 'Poppins', sans-serif;
}

hr {
  border: 1.5px solid #0b5ed7
}

.crd {
  background-color: #f1f2fa;
  transition: all;
}

.crd:hover {
  background: #0b5ed7;
  color: #fff;
  transition: 0.5s;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/index.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- SERVICES SECTION START -->
<section>
  <div class="container">
    <div class="row py-5">
      <h2 class="display-6 mb-4">Our Services</h2>
      <!-- <div class="col-lg-4 col-md-6">
                    <div class="card text-center p-4 mb-2">
                        <i class="fas fa-camera fa-3x"></i>
                        <h4>CCTV Services</h4>
                        <p class="p-2">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
                            voluptatum, voluptate, quibusdam, quia voluptas quod quos
                            exercitationem quae voluptatibus doloribus quidem. Quisquam
                        </p>
                    </div>
          </div> -->
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fas fa-database fa-3x"></i>
          <h4>Datacenter Support</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
      <!-- <div class="col-lg-4 col-md-6">
              <div class="card text-center p-4 mb-2">
                <i class="fas fa-sign-hanging fa-3x"></i>
                <h4>Digital Signage</h4>
                <p class="p-2">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
                  voluptatum, voluptate, quibusdam, quia voluptas quod quos
                  exercitationem quae voluptatibus doloribus quidem. Quisquam
                </p>
              </div>
            </div> -->
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fas fa-headset fa-3x"></i>
          <h4>General Support</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fas fa-server fa-3x"></i>
          <h4>Network Support</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fas fa-cash-register fa-3x"></i>
          <h4>POS Services</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fas fa-tower-cell fa-3x"></i>
          <h4>Telecom Services</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fa-solid fa-bars fa-3x"></i>
          <h4>Additional Services</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- SERVICES SECTION CLOSE -->

In your css codes and in the section related to the hover, you did not put curly brackets at the end of block.. — Yasin Pishvaz, Jul 10 '23 at 00:07
@Yasin Pishvaz I accidentally forgot to copy it when I was typing my question. — PFL, Jul 10 '23 at 00:28
Your hover effect seems to work (in isolation - so you may have other css rules that have higher precedence, or it could even just be caching). — topsail, Jul 10 '23 at 01:32
@topsail what should I do then because all the code that is in the index.css file is the only CSS code I have in the entire project. And what does caching mean — PFL, Jul 10 '23 at 02:30
@Yasin Pishvaz you mean at the end of all the code because if that is what you mean yes I did. — PFL, Jul 10 '23 at 02:35
*all the code that is in the index.css file is the only CSS code I have in the entire project* ?? You have lots more css in your project - see all the css link tags in your index.html. I agree that you have posted incomplete and unusable html, btw - that hurts your question a lot (will probably earn you downvotes and maybe even lead to the question being closed as unreproducible). — topsail, Jul 10 '23 at 02:37
If you want us to take the time to figure out your issue, please take the time to create a minimal reproducible example. — Tim R, Jul 10 '23 at 05:27
@Tim R all the code in the entire project is in my question. — PFL, Jul 10 '23 at 05:42
@PFL You're not supposed to post all the code. The images you included aren't even from the code you posted. Please take the time to read [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask), especially the part about "Include just enough code to allow others to reproduce the problem. For help with this, read [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example)." — Tim R, Jul 10 '23 at 06:04
@Tim R The first image is from the code the second image I had to get from the internet because I couldn't get the CSS to work the way I wanted it to. — PFL, Jul 10 '23 at 06:36
*what does caching mean* - you sometimes need to clear your cache to avoid seeing "old" or "stale" cached data. See [disabling-chrome-cache-for-website-development](https://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development) and [devtools-view cache data](https://developer.chrome.com/docs/devtools/storage/cache/#view) — topsail, Jul 10 '23 at 13:06
@topsail I don't it's the cache I think something is wrong with the CSS because I tested it by trying to change the background of the site to a bright pink color and the background of the website didn't change. I also made my question reproducible. — PFL, Jul 10 '23 at 16:04
I edited your question to add a Stack Snippet, as described by the article referenced in @TimR's [comment](https://stackoverflow.com/questions/76649972/css-styling-is-not-being-applied-to-website#comment135140655_76649972). Users can run that code on their mobile devices. I will say that when I click on a card on my Android device, its background turns blue... But your question has changed from its original, so I don't know... — Heretic Monkey, Jul 10 '23 at 16:15
*I don't it's the cache I think something is wrong with the CSS because I tested it by trying to change the background of the site to a bright pink color and the background of the website didn't change* this is incorrect reasoning. A cached page or asset is by definition the old version, not the new version. But mainly, since you didn't know what caching was I think you really really really need to know. — topsail, Jul 10 '23 at 16:43

score 1 · Accepted Answer · answered Jul 10 '23 at 16:07

1

I made a mistake with linking the CSS to the HTML I fixed the problem. Thanks everyone for all your help though.

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

answered Jul 10 '23 at 16:07

PFL

158
10

CSS styling is not being applied to website

1 Answers1