Pierre Jardinet Pierre Jardinet - 3 months ago 9
CSS Question

background-color doesn't apply to my page

After styling my css I wanted to add a red background.
Problem is when I add the css to my body it doesn't apply to my page.

Could you tell me what's wrong and why?

You can find my code here: https://codepen.io/jardi/pen/RGNZJV

body {
background-color:red;
}

#pageTitle {
text-align:center;
font-family:Monospace;
color: rgb(51,22,225);
padding:50px;
font-size:30px;
}

.paraGraphs {
font-size:20px;
font-family:Times New Roman;
margin-left:50px;
margin-right:50px;
text-align:justify;
}

#bottom-image{
display: block;
margin: 0 auto;
}

Answer

In your jsFiddle, the background color is being overridden by the jsFiddle scaffolding here:

body { 
        background-color: #FFEEEE;
        color: #004;
        font-family: 'Roboto', sans-serif; 
    }

To test, you can add a !important to your CSS property value like this:

body {
  background-color:red !important; /* Prototype code only, !important bad */
}

Outside of the jsFiddle, it's almost sure that something else is overriding your body background color (we can't see what). To find out, examine the "computed" CSS for the body element in browser dev tools, to see what.

Reference: Chrome Developer Tools: How to find out what is overriding a CSS rule?

Once you see what CSS rule is overriding your background, either remove the offending code, or make sure your selector has more specificity, for example my adding a class:

body.myClass {
  background-color:red;
}