CSS not styling the DIV correctly when styled text is entered

Question

I'm trying to format text that is in a DIV, however, I also want to style the DIV.

In the PHP page I have the DIV and the text:

<div id="main-content">
    <h1>Welcome to the Drug Debate!</h1>
    <p>Home of facts and deabtes of legal and illegal drugs!The Drug debate offers a safe and relaxed enviroment where you will be able to find information and facts about different types of drug </p>
</div>

Then in my CSS I am trying to style that DIV using:

#main-content{
background-color: #FFFFFF;
width:600px;
height: 350px;
margin: 0 auto;
border:solid;
}

and the <h1> and <p> using:

h1 {
 font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
 font-size:24px;
 padding-left:200px;

}

(and similar for <p>)

This is creating problems, such as the background colour for the DIV isn't applying behind the text?

(please bear in mind i'm quite new to coding and this site!!)

`#FFF` or `#FFFFFF` means white! change color See [here](http://jsfiddle.net/RRH7G/1/) — Dhaval Marthak, Jan 07 '14 at 16:12
It's probably cause you're applying a white background to your `h1` and to your `div`. #FFFFFF is the colour value for white, you can discover hex colours here http://www.colorpicker.com/ — Luke, Jan 07 '14 at 16:12
it isn't white on white, beauty. i have styled my site background to be grey, so it does show. — bec, Jan 07 '14 at 16:14
well that's what you had for code, originally. @user3169325 since you [**edited it a minute ago**](http://stackoverflow.com/revisions/20976414/1). So there. — Funk Forty Niner, Jan 07 '14 at 16:15
Your site background isnt grey its white becoz background-color: #FFFFFF; means white — BetaCoder, Jan 07 '14 at 16:16
* { margin: 0; padding: 0; border: 0; background-color:#848484; } this is also in the CSS — bec, Jan 07 '14 at 16:16
@user3169325 when you call #main-content{ background-color: #FFFFFF } it means it basically overwrites the first css and creates and displays in white , do you want this - http://jsfiddle.net/tbwy7/ — BetaCoder, Jan 07 '14 at 16:18
Gray is `#c0c0c0` `#999999` or `#666666` etc. I know these by heart. This question needs to be closed, shows no effort to solve. It's CSS, not `C++` what's so hard about that? `$that="CSS";` — Funk Forty Niner, Jan 07 '14 at 16:18
Try applying your colour to the body tag? `body { background-color: #848484; }` — Luke, Jan 07 '14 at 16:18
@user3169325 You need to Learn the Basics , better practice at http://codeacademy.com , Try the webfundamentals course,it really is worth for you. — BetaCoder, Jan 07 '14 at 16:21

score 0 · Accepted Answer · answered Jan 07 '14 at 16:22

The default background color property is transparent, which is why you see the background color from your universal selector coming through. Simply add background-color:inherit; to your CSS.

h1, p {
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size:24px;
    padding-left:200px;
    background-color:inherit;
}

jsFiddle example

CSS not styling the DIV correctly when styled text is entered

1 Answers1