Html - Something is wrong with my CSS ID: it doesn't work

RoseNguyen
August 5, 2023
246 views
0 votes
2 Answers

# I can’t see what is wrong with this, I have an HTML file and a CSS file

body {
  font-size: 16px;
  color: black;
  background-color: #61122f;
  font-family: 'Oxygen', sans-serif;
}

#header-nav {
  background-color: #f6b319;
  border-radius: 0;
  border: 0;
}

#logo-img {
  background: url("pngtree-coffee-time-png-image_3626459.jpg")
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <!--fonts-->
  <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="pull-left visible-md visible-lg">
            <div id="logo-img"></div>
          </a>

        </div>
      </div>
    </nav>
  </header>
</body>

</html>

My problem is the id="header-nav" under the header tag doesn’t work, and so does the id="logo-img" 🙁

I’m following an online lesson and doing exactly the same but my code is not applied. I have checked it on validation and it said nothing wrong. Please someone tell me what’s wrong with this?

Answers

While I typically try to stay away from using !important, you can add that to your background color and it will override the bootstrap color.

It seems like there is some kind of layering/specificity issue, but without seeing your whole code, I couldn’t tell you. You’re using an id which has a specificity value of 1,0,0 and Bootstrap is using a class which has a value of 0,1,0. So this is more than just a specificity issue as your id is a high specificity and should override their class.

Learn more about Specificity and how it is calculated on MDN.

It looks like the issue is because Bootstrap is using !important on their class. Learn about how !important works and is rendered here: https://www.youtube.com/watch?v=dS123IXPcJ0.

body {
  font-size: 16px;
  color: black;
  background-color: #61122f;
  font-family: 'Oxygen', sans-serif;
}

#header-nav {
  background-color: #f6b319 !important;
  border-radius: 0;
  border: 0;
}

#logo-img {
  background: url("pngtree-coffee-time-png-image_3626459.jpg")
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <!--fonts-->
  <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="pull-left visible-md visible-lg">
            <div id="logo-img"></div>
          </a>

        </div>
      </div>
    </nav>
  </header>
</body>

</html>

It appears that the Bootstrap you have linked is higher specificity than your own CSS. Take a look here for a deeper dive on specificity. I was able to use your property by adding !important to the background color option.

Edit: It’s more of a cascade issue instead, due to the classes overriding each other with !important.

body {
  font-size: 16px;
  color: black;
  background-color: #61122f;
  font-family: 'Oxygen', sans-serif;
}

#header-nav {
  background-color: #f6b319 !important;
  border-radius: 0;
  border: 0;
}

#logo-img {
  background: url("pngtree-coffee-time-png-image_3626459.jpg");
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <!--fonts-->
  <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="pull-left visible-md visible-lg">
            <div id="logo-img"></div>
          </a>
        </div>
      </div>
    </nav>
  </header>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Something is wrong with my CSS ID: it doesn't work

Answers