CSS styles may not be consistently displayed or may vanish after being initially implemented

The colors and background remain unchanged. In previous projects, everything ended up falling apart

Refreshing the page with F5 or CTRL + F5 does not make a difference. When using Open Live Server in VS Code, it initially shows the changes being applied but then they disappear. Here is my head:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My blog</title>
    <link rel="stylesheet" href="css/style.css">
    <link href='https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33515c4b5a505c5d4073011d021d07">[email protected]</a>/css/boxicons.min.css' rel='stylesheet'>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57353838232423253627176279647964">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3146565945710201011f1f060101">[email protected]</a>&display=swap" rel="stylesheet">
  </head>

This is my body:

* {
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

html,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #5c5959;
}

body {
  background: #f6f6f6;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e7eaeaf1f6f1f7e4f5c5b0abb6abb6">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link href='https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e1ecfbeae0ecedf0c3b1adb2adb7">[email protected]</a>/css/boxicons.min.css' rel='stylesheet'>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c8c8d3d4d3d5c6d7e79289948994">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e5949465a6e1d1e1e0000191e1e">[email protected]</a>&display=swap" rel="stylesheet">

<header class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="col-4">
        <h1>My site</h1>
      </div>
      <nav class="col-8">
        <ul>
          <li><i class='bx bxs-home'></i><a href="#">Home</a></li>
          <li><i class='bx bxs-bowl-hot'></i><a href="#">Services</a></li>
          <li>
            <i class='bx bxs-user'></i><a href="#">Account</a>
            <ul>
              <li>
                <a href="#">Admin Panel</a>
              </li>
              <li><a href="#">Logout</a></li>
            </ul>
          </li>
          <li><i class='bx bxs-phone'></i><a href="#">About Us</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

htmlcssbootstrap-5

Answer №1

Your custom styles are getting overridden by Bootstrap's.

You can easily spot the Bootstrap rule taking precedence over your own rule in the devtools.

https://i.sstatic.net/MGxXEspB.png

Both rules have equal specificity, making it an order of precedence issue caused by importing your CSS file before Bootstrap's.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My blog</title>
    <!-- Importing our custom styles here --><link rel="stylesheet" href="css/style.css">
    <link href='https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4624293e2f25292835067468776872">[email protected]</a>/css/boxicons.min.css' rel='stylesheet'>
    <!-- Importing bootstrap here --><link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3818c8c979097918293a3d6cdd0cdd0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5423333c20146764647a7a636464">[email protected]</a>&display=swap" rel="stylesheet">
  </head>

Moving your custom styles to the bottom of the import list should fix this issue. CSS rules are applied from first to last, with higher specificity overriding lower or similar specificity rules. It's like saying "paint the wall green," then changing your mind to "actually, yellow."

If we eliminate the external resources, you can observe that the styles now take effect:

* {
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

html,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #5c5959;
}

body {
  background: #f6f6f6;
}
<header class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="col-4">
        <h1>My site</h1>
      </div>
      <nav class="col-8">
        <ul>
          <li><i class='bx bxs-home'></i><a href="#">Home</a></li>
          <li><i class='bx bxs-bowl-hot'></i><a href="#">Services</a></li>
          <li>
            <i class='bx bxs-user'></i><a href="#">Account</a>
            <ul>
              <li>
                <a href="#">Admin Panel</a>
              </li>
              <li><a href="#">Logout</a></li>
            </ul>
          </li>
          <li><i class='bx bxs-phone'></i><a href="#">About</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges with resizing in Bootstrap

I need assistance with my login form that is appearing in a Bootstrap modal. The modal I am using is the standard size, not the larger one. In the form, there are 2 input fields and a login button on the left side, while the right side should contain other ...

htmlcsstwitter-bootstrap

Having trouble deleting element despite having the correct ID?

Whenever I click on the map, it adds an element to the map div using this line of code: $('#map').append('<label>test:</label><input type="hidden" name="map_coords" id="' + e.latlng.lat + '" value="' + e.latlng ...

javascriptjqueryhtml

How to use puppeteer to extract images from HTML that have alt attributes

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 nopadding text-center"><!-- Start Product Photo --><div class="row"><img src="/products/ca/downloads/images/54631.jpg" alt="Product image 1">&l ...

javascripthtmlnode.jspuppeteer

Ways to initiate the download of an audio link using JS without the need for the browser to redirect to a different page

I am looking to create a script that can automatically download audio files from a website. The problem I'm encountering is that using element.click() to simulate a "click" event doesn't work as expected, as the browser ends up navigating to the ...

javascripthtmlaudiobrowserdownload

Develop a custom script function for every instance of a @foreach loop

I have a challenge where I need to style automatically generated table rows by clicking on a button. Currently, my code appears as follows: @foreach($tours as $tour) <tr id="{{$tour->id}}"> <td> {{$tour->tournr}} &l ...

javascripthtmllaravel

The angular-block-ui feature fails to run my HTML code as a personalized message

I'm looking to enhance my UI by implementing a blocking feature with a spinner display. My attempt involved the following code: blockUI.start("<div class='dots-loader'>Minions are Working!</div>"); // code for fetching data ...

javascripthtmlcssangularjs

Tips for achieving a Google Map that smoothly slides behind a sticky header as you scroll

I recently added a sticky header using CSS to my long HTML page. At the bottom of the page, there is a <div> element with a Google Map embedded in it. As I scroll down the page, the content scrolls behind the sticky header as expected, but the Googl ...

htmlcssgoogle-mapsscroll

What is the best way to align a tweet in the middle of

When using Twitter to embed a tweet, the code provided is necessary. An example of this can be seen below: <blockquote class="twitter-tweet"><p>NoSQL space gradually becoming SlowSQL space.</p>&mdash; Big Data Borat (@BigDataBorat) & ...

htmlcsstweets

Currently, I am expanding my knowledge of PHP and MySQL by working on a dynamic form that utilizes arrays. As I progress through the project,

One of my recent projects involved creating dynamic rows in a form using code. I managed to save the data in an array and display it using a foreach loop, but I'm facing challenges when trying to insert this data into a database. Here's a glimps ...

javascriptphpcssmysql

Creating interactive buttons in Angular 2

I am currently in the process of coding my own website and I've run into an issue with a button. Here's the code I'm working with: <div *ngFor="let game of games" class=card"> <div class="card-body"> <h5 class="card-t ...

htmlangular

Load Bootstrap 4 Modal with Ajax

I recently upgraded from Bootstrap 3 to Bootstrap 4.1 Within my applications, I utilize ajax loaded modals. In the layout, I have: <div class="modal fade" id="myModalToFillInfo" tabindex="-1" role="dialog" aria-labelledby="myModalToFillInfoLabel" ari ...

javascriptjqueryhtmlajaxbootstrap-4

Displaying information from a database in HTML dropdown menus and tables

Recently, I started learning PHP and I am facing a challenge with my database that has 5 columns: "id", "fldName", "fldPrice", "fldSupplier", and "fldPackage". In my HTML table, I have select options where I display "fldName" based on a specific value of ...

phphtmlmysql

Prevent Child Elements from Overstretching Container with Bootstrap Flex

I'm working on a layout where all elements can be viewed without the need for scrolling. Any panels that require more space should be scrollable. In the following example, I want the contents of main-left to be scrollable without stretching the entire ...

javascripthtmlcssbootstrap-4flexbox

Converting form input to JSON and then parsing it into an object

I'm currently working on converting form data to update a JSON object upon submission. Here's my progress so far: var app = { slidePreviews: "", selectedTheme: "", slideDuration: 7000, slides: [] }; $(document).ready(function() ...

javascriptjqueryhtmlforms

Conceal content within a bullet point

I'm encountering an issue with this specific element. HTML <div class="navbar slide-menu"> <div class="container"> <ul class="nav navbar-default"> <li class="brand"><a href="#">Menu</a></li> ...

jqueryhtmlcss

Adding a button to a shadow root that already exists is not the proper procedure

var shadow = document.getElementById( "3rd-party-div" ).shadowRoot; let style = document.createElement("style"); style.textContent = ` .custom_button{ padding: 10px; display:block; float:left; text-ali ...

javascripthtmlshadow-dom

Unequal height among each div's elements

I'm struggling with creating a footer divided into 3 blocks, but they do not have equal heights, causing the border-right line to appear uneven. Here is a screenshot of the issue: Not equal height of elements Any suggestions on how to fix this? Is m ...

htmlcssblockfooter

The fading effects are not functioning as expected in the following code

Hey there, I'm not the most tech-savvy person, but I managed to come up with this code for page redirection. Unfortunately, I couldn't quite get the fade out and fade in effects to work properly when executing it. If anyone out there can help me ...

javascripthtml

How can I integrate custom PHP pages into Odoo Community 12?

I am looking for a way to integrate my custom PHP webpages with the login page of Odoo Community that is already set up and functioning on my server. I want specific users to be redirected to my custom pages after logging in. Any suggestions on how to ac ...

javascriptphphtmlcssodoo-12

What is the easiest way to display index.html using Django?

Hi there, After setting up Django 1.9 on my Ubuntu machine, I am looking to deploy a lightweight Django app. Here is what I have done so far: cd ~ django-admin startproject dj10 cd ~/dj10/dj10/ mkdir templates echo hello > templates/index.html My qu ...

pythonhtmldjango