CODEWITHSUNDEEP
htmlcss
m ali
m ali

Reputation: 646

colour not showing on browser, but shows in design view

I made a simple HTML page, made a CSS page and linked it; on Dreamweaver it shows the background is black but, when I put the browser on, it shows as white!

Code:

HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <link rel="stylesheet" type="text/css" href="home.css" />
 <link rel="stylesh eet" type="text/css" href="css/css.css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
</head>

<body>

 </body>

 </html>

CSS code: home.css

@charset "utf-8";
/* CSS Document */

body {
  margin: 0;
  padding: 0;
  background-color: #000000; 
}

Upvotes: 0

Views: 3739

Answers (5)

Malachi
Malachi

Reputation: 3221

here is a fiddle that shows what you need there

http://jsfiddle.net/85svu/

#000000

you also need to add something to the body of the page

<body>
  <p> here is some content</p>
</body>

ADDITIONAL INFORMATION AFTER RESEARCH

I posted a Question on Programmers.Stackexchange And found the answer and links to be eye opening about the <html> and <body> tag CSS debate.

Here are the links

http://www.w3.org/TR/CSS2/colors.html#background

http://www.sitepoint.com/styling-the-html-and-body-elements/

Upvotes: 1

Josh Powell
Josh Powell

Reputation: 6297

One thing that no one has mentioned, changing the html to your black background will make it black even if there is no content.

Here is the code,

html {
   background: #2b2b2b;
}

Then you can have your background on the body as well for when you have content on your page.

JSFIDDLE

Upvotes: 0

TreeTree
TreeTree

Reputation: 3230

Your hex color cannot have 4 digits. It needs either 3 or 6.

#000 or #000000

Edit:

In case people see this answer and stop reading further and still wonder why it's white. Like everyone else said, the body will have height of zero if it has no content, so the background won't show up.

Though the odds of a body being totally empty is pretty slim..

Upvotes: 5

Ennui
Ennui

Reputation: 10190

Change background-color to #000000 or #000.

body {
    margin: 0;
    padding: 0;
    background-color: #000; 
}

You can abbreviate single-digit hex values like #000000 or #FFFFFF or #777777 to 3 digits for brevity (#000, #FFF, #777 and so forth), but it will not work with any other number of digits.

Probably the reason it works in Dreamweaver but not your browser is because your body has no content, padding or margin and therefore its height is zero and you won't see any background as a result. Temporarily add height: 100px or something to your body declaration to test the background color (or just add some content to the body).

Upvotes: 3

user2965520
user2965520

Reputation: 1

Change the background color to #000 and it will work :)

Upvotes: -1

Related Questions