Creating a div for background color

Question

I'm trying to create a div in HTML and then in a separate style sheet. I'm giving the instruction to put a background of red on it.

For some reason, nothing is happening. Here is the code

<div id="Box">
<p class="special">Selection:</p>
<br />
<input type='submit' value='Submit' />
</div>

In my css file, I use this command

#Box   {
 background:red;;
}

This should work. Is your style sheet being properly embedded into your HTML page? — Pekka, Feb 21 '12 at 17:02
Are the double semi-colons a typo. That might be throwing your code off. — PruitIgoe, Feb 21 '12 at 17:03

score 4 · Accepted Answer · edited May 23 '17 at 12:11

For problems like this, use a tool like Firebug to determine what CSS rules are applied to an element ("Inspect Element" in the context menu). The tools will also allow you to see all the errors which happened during page loading (for example if a CSS stylesheet could not be found) and they show all the resources which were loaded plus lots of other useful information.

See here if you are a victim of IE: Is there something like "Firebug for IE" (for debugging JavaScript)?

Chrome already comes with batteries.

score 2 · Answer 2 · answered Feb 21 '12 at 17:03

2

Based on the info you provided, it should work fine as seen here

Are you positive you are linking your CSS sheet correctly?

answered Feb 21 '12 at 17:03

Ben

764
4
19

score 0 · Answer 3 · answered Feb 21 '12 at 17:03

0

You have two semicolons after background: red, which is causing your code to break. See this jsFiddle for the solution.

Alternatively, you could have linked your stylesheet incorrectly. You should include this between the <head> tags of your page:

 <LINK href="demo.css" rel="stylesheet" type="text/css">

answered Feb 21 '12 at 17:03

jacktheripper

13,953
12
57
93

1

No, a doubled semicolon won't break CSS… The main reason will be a not-linked stylesheet. – feeela Feb 21 '12 at 17:18

score 0 · Answer 4 · answered Feb 21 '12 at 17:03

0

Try removing one of the semi-colons in your CSS:

 #Box {
    background:red;
 }

answered Feb 21 '12 at 17:03

Curtis

101,612
66
270
352

score 0 · Answer 5 · answered Feb 21 '12 at 17:06

0

To set a background colour on your DIV, use the the CSS background-color property: http://www.w3schools.com/cssref/pr_background-color.asp

answered Feb 21 '12 at 17:06

Nigel Belham

463
3
12

`background` is a shortcut for `background-color` and all other background-options. – feeela Feb 21 '12 at 17:19

score 0 · Answer 6 · answered Feb 21 '12 at 17:08

0

try using background-color: Red; as the others have mentioned you also have two semi-colons

answered Feb 21 '12 at 17:08

Oliver

1,490
18
19

Creating a div for background color

6 Answers6