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
– AndrewL64, Commented Dec 5, 2019 at 12:24
@Bpicco CSS errors are not written in console, only JavaScript ones. — besciualex
– besciualex, Commented Dec 5, 2019 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
– AndrewL64, Commented Dec 5, 2019 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
– besciualex, Commented Dec 5, 2019 at 12:46

Quentin · Accepted Answer · 2019-12-05 12:21:03Z

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 5, 2019 at 12:21

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bpicco Over a year ago

Thank you for your quick answer. Bootstrap was indeed overwriting my css.

connexo · Accepted Answer · 2019-12-05 12:29:40Z

3

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.

edited Dec 5, 2019 at 12:29

answered Dec 5, 2019 at 12:21

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Comments

Jenaro Calviño · Accepted Answer · 2019-12-05 12:21:33Z

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 · Accepted Answer · 2019-12-05 12:29:22Z

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>

Collectives™ on Stack Overflow

Custom CSS property "background-color" not working

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related