Custom CSS property "background-color" not working

Question

I've been trying to use CSS variables recently into a very simple code. It actualy did not work. I double checked the informations I found about how to use variables but I can't find my mistake. Maybe am I doing something wrong ?

:root {
  --my-color: red;
}

body {
  background-color: var(--my-color);
}

<!DOCTYPE html>
<html>

<head>
  <title>My title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="./style/mainPage.css">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="row">
    <div class="col-sm-12">
      <h1>HELLO WORLD</h1>
    </div>
  </div>
</body>

</html>

I left the <head> in case of some <link> are not compatible with the utilisation of css variables.

With this code, the background-color stays white. If I do not use a variable instead, it changes accordingdy. Am I missing something ?

Thanks for your help.

As pointed out in one of the answers below, the bootstrap css is overwriting your custom css. Just move your custom css link tag below your bootstrap css link tag and the css variable should work. — AndrewL64, Dec 05 '19 at 12:24
@Bpicco CSS errors are not written in console, only JavaScript ones. — besciualex, Dec 05 '19 at 12:33
@besciualex Agreed but I asked him for console errors earlier since the console indicates us if there is a mistake with the file-path of the css and js files. — AndrewL64, Dec 05 '19 at 12:38
I agree it says in Console tab too, but it's better to check for file paths mistakes using Network tab. All red rows means errors. — besciualex, Dec 05 '19 at 12:46

score 3 · Accepted Answer · answered Dec 05 '19 at 12:21

3

You've linked to your own CSS before you link to bootstrap.min.css.

bootstrap.min.css sets the background colour on body element which overrides your settings.

Swap the order so your CSS overrides the library rather than the other way around.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./style/mainPage.css">

answered Dec 05 '19 at 12:21

Quentin

914,110
126
1,211
1,335

Thank you for your quick answer. Bootstrap was indeed overwriting my css. – Bpicco Dec 05 '19 at 12:25

connexo · Answer 2 · 2019-12-05T12:29:40.053

You are loading Bootstrap css which has

body {
    background-color: #FFF;
}

This is easy to find out when you use the developer tools of your browser and inspect the body element:

This overwrites your

background-color: var(--my-color);

In CSS, if two contradictory rules have the same CSS specificity, the one defined later wins.

So if you want to override this Bootstrap style, make sure your stylesheet gets included in the document after the one which has the rule you want to override.

score 1 · Answer 3 · answered Dec 05 '19 at 12:21

you shpuld try importing your css after you import bootstraps stylesheet, something like this worked for me:

<head>
    <title>My title</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Latest compiled and minified CSS -->
    <link
    rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
    />
    <!-- jQuery library -->
    <link rel="stylesheet" type="text/css" href="./main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">   </script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">     </script>
  </head>

besciualex · Answer 4 · 2019-12-05T12:29:22.320

Your code is correct. The problem is from another CSS which is overwriting your current CSS rule. Bellow is your code, unaltered, and the proof it works.

:root {
    --my-color: red;
}

body {
    background-color: var(--my-color);
}

<div class="row">
    <div class="col-sm-12">
        <h1>HELLO WORLD</h1>
    </div>
</div>

Use Developer Tools (press F12) to see who is overwriting your CSS rules.

The best practice in such cases is to link your CSS file immediatedly after you import other libraries.

<head>
  <title>My title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="./style/mainPage.css">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <!-- MY OWN CUSTOM CSS FILE -->
  <link rel="stylesheet" type="text/css" href="/csss/my_local_file.css">
</head>

Custom CSS property "background-color" not working

4 Answers4