CSS background-color for body element not working

Question

I cannot get the body to change its background color. All the other CSS attributes apply perfectly to the other elements.

 document.getElementById('color').onclick = changeColor; var currentColor = "red"; function changeColor() { if (currentColor == "red") { document.body.style.color = "green"; currentColor = "green"; } else { document.body.style.color = "red"; currentColor = "red"; } return currentColor; }

 body { font-family: Arial; font-size: 32px; color: red; background-color: #E7E7E7; } h1 { font-family: Georgia, Arial; font-size: 38px; } p { font-family: Arial; } button { font-family: Arial; } ul { list-style-type: none; margin: 0; padding: 0; text-align: center; }

 <h1> This is a header.</h1> <button id="color">Change the color</button> <p> Paragraph testing two.</p> <br><br><br><br><br><br><br> <ul> <li><a href="https://www.google.com">Google</a></li> <li><a href="https://www.cnn.com">CNN</a></li> </ul>

Answer 1

At first this can be apply with !important directive such as

body {
 background-color: #E7E7E7 !important;
}

If you need more help, please give more detail about the project or page. It can be also inherit some another CSS directives or classes or It may include style directives.

If you share page code the solution can be more faster.

Answer 2

Check this. Your previews code I can't get your full code. Now check this https://codepen.io/bravotanmoy/pen/bRpEbL

HTML

<button id="color" onclick="changeColor()">Change the color</button>

<div id="white"></div>
<div id="not-white"></div>

CSS

 body {
  background-color: yellow;  
}

div {
  border: 1px solid #000;
  float: left;
  height: 50px;
  width: 50px;
}

#white {
  background: #fff;
  margin-right: 20px;
}

#not-white {
  background:#e7e7e7;
}

JavaScript

//document.getElementById('color').onclick = changeColor();
var currentColor = "red";

function changeColor() {
        if(currentColor == "red"){
        document.body.style.backgroundColor  = "green";
        currentColor = "green";
        }
        else{
        document.body.style.backgroundColor  = "red";
        currentColor = "red";
        }
        return currentColor;
}

Answer 3

Try with this simple css, create new unique ID in css, ex: david

.david {
  background-color: #19529C;
  font-family: Helvetica, sans-serif;
}

Then match the html code on your website for the class, usually like a section

Like this:

<section id="unique id" class="david">

Add here your content

</section>