Pierre Jardinet Pierre Jardinet - 1 year ago 57
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 {

#pageTitle {
color: rgb(51,22,225);

.paraGraphs {
font-family:Times New Roman;

display: block;
margin: 0 auto;

Answer Source

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 {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download