background-color doesn't apply to my page

Question

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;
}

Riskbreaker · Answer 1 · 2016-09-06T17:37:02.477

0

Codepen has a scaffolding css with that Bootstrap so it has a bg color of white ...If you do it out of this you will see it and you can doublecheck in codepen by just doing this:

body {
    background-color: red !important;
}

But you wont need that !important

UPDATE

TO bypass your Bootstrap body bg just add a css file after that OR add inline like so:

    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="/css/yourfile.css" rel="stylesheet" />
      <style>
      body {
      background-color:red;

    }</style>

    </head>

edited Sep 06 '16 at 17:37

answered Sep 06 '16 at 17:23

Riskbreaker

4,225
21
30

I checked it out of codepen before posting here. I created an html file with the name index.html and linked my css file in my html file. Everything applies but not the background color :/. Did I do something wrong in my css? Should it be in a different order? When I add !important it works but I dont understand why I have to add important – Pierre Jardinet Sep 06 '16 at 17:25
Its your Bootstrap file..after that file I have that style added or add a css file after that – Riskbreaker Sep 06 '16 at 17:29
great glad that made sense please approve answer @PierreJardinet – Riskbreaker Sep 06 '16 at 17:38

score 0 · Answer 2 · answered Sep 06 '16 at 17:24

0

You have re-defined background-color for the body after that background-color: red;, so add !important, so it can not be overriden:

background-color: red!important;

answered Sep 06 '16 at 17:24

bdev

106
1
5

Well it is the inly background-color in my css style so why would I have to override it? Thanks for the advice but I would like to understand :) – Pierre Jardinet Sep 06 '16 at 17:31
To see what's overriding your rule check out your body element with developer tools like this: http://stackoverflow.com/questions/13867088/chrome-developer-tools-how-to-find-out-what-is-overriding-a-css-rule . – Tim Grant Sep 06 '16 at 20:17

score 0 · Answer 3 · answered Sep 06 '16 at 17:25

0

I could solve it by using html body instead of body:

html body {
    background-color:red;
}

answered Sep 06 '16 at 17:25

Cocsam

1
1

What does html body do? – Pierre Jardinet Sep 06 '16 at 17:31

score 0 · Accepted Answer · edited May 23 '17 at 10:33

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;
}

score 0 · Answer 5 · answered Sep 06 '16 at 17:29

0

According to the link that you attached, your code is using an external CSS: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

And inside this CSS already have an rule for body...

If you want, just add "!important" in the end of the line to force your color, example:

body {
    background-color:red !important;
}

answered Sep 06 '16 at 17:29

Wellington da Mata

1

I see I understand thank you very much :). Well bootstrap should be avoided in the future – Pierre Jardinet Sep 06 '16 at 17:34
@PierreJardinet: Instead of avoiding bootstrap try adding your bootstrap file to load first and then you can add your own custom css, in that way you can easily override the bootstrap's css. – Navnit Sep 06 '16 at 18:04
"Just add !important" is poor advice for creating maintainable CSS. – Tim Grant Sep 06 '16 at 20:14

background-color doesn't apply to my page

5 Answers5