Html Question posted in
Some basic documentation can be found here.

Html – CSS styling is not applied, or disappear after being applied

The text color and background do not change. On other projects, everything fell off altogether

Updating the F5 page and CTRL + F5 does not help. When running Open live server in VS code, it shows that the changes are applied first, and then disappear.
This 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/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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:[email protected]&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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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:[email protected]&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="#">Главная</a></li>
          <li><i class='bx bxs-bowl-hot'></i><a href="#">Услуги</a></li>
          <li>
            <i class='bx bxs-user'></i><a href="#">Кабинет</a>
            <ul>
              <li>
                <a href="#">Админ панель</a>
              </li>
              <li><a href="#">Выход</a></li>
            </ul>
          </li>
          <li><i class='bx bxs-phone'></i><a href="#">О нас</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>
Tags:

2

Answers


  1. 0

    Your styles are being overridden by Bootstrap.

    In devtools you can see the Bootstrap rule (above) overriding your rule (below).

    conflicting rules with Bootstrap

    The specificity is the same, so this is a order of precedence issue as result of importing your own CSS file above 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/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <!-- Importing bootstrap here --><link href="https://cdn.jsdelivr.net/npm/[email protected]/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:[email protected]&display=swap" rel="stylesheet">
  </head>

    Moving your own styles to the bottom should resolve the issue. CSS rules are applied first to last, overriding same or lower specificity. Like asking "hey paint the wall green", "actually, yellow"

    If we remove the external resources you can see the styles are now being applied:

    * {
  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="#">Главная</a></li>
          <li><i class='bx bxs-bowl-hot'></i><a href="#">Услуги</a></li>
          <li>
            <i class='bx bxs-user'></i><a href="#">Кабинет</a>
            <ul>
              <li>
                <a href="#">Админ панель</a>
              </li>
              <li><a href="#">Выход</a></li>
            </ul>
          </li>
          <li><i class='bx bxs-phone'></i><a href="#">О нас</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>
    Login or Signup to reply.
  2. 0

    write down bottom after bootststap

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search