New to CSS - how to put background color into style sheet?

They have: 9 posts

Joined: Apr 2009

Hi all!

I am a newbie with CSS and actually not very asvvy.
I got this new full css template and would like to be able to change the background color on which the website "sits".

Originally the background color was within the html coding of every page like this: (I have deleted this, because I thought it is otherwise over writing the stylesheet command for the color?)

<body style="background-color: rgb(255, 255, 0); direction: ltr;">

Now I would like to put the background color into the style sheet, so I can change the color site-wide, if required. The code in the style sheet is:

#container {
width: 950px;
margin-right: auto;
margin-left: auto;
background-color: white;
border: thin;
border-color: #a9a9a9;
border-style: solid;
}
#body{
margin: 0px;
padding: 0px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
color: black;
}

What needs to be altered in the style sheet and what would I need to put onto the page source code??

Thanks in advance for your help and advice,

new-to-css

greg's picture

He has: 1,574 posts

Joined: Nov 2005

Hi, welcome to TWF new-to-css Smiling
(I'm presuming that's not your real name)

Which background do you want to change? The main background that the template sits on can be changed using the body tag in your style.css
EG

body{
background-color: red;
}

After that you have various areas, divs and unordered lists that could have their background colours changed.

A header div, but the image seems to cover all of that area so a background colour would not be seen anyway.

Then you have the main content under the top nav (Home, Vet Tips, Contact, Privacy). You could change all the individual colours by opening your style.css stylesheet in an editor and changing them or adding a background colour if they don't already have one.

EG
The top nav menu is a class called .bevelmenu. so opening your style.css stylesheet and add background-color: green; as a new property to your bevelmenu class.

Alternatively, you could perhaps wrap the entire centre content area in a new div and give that a background colour. But if any of the inner divs (like the left menu) already has a background colour then the inner one will override the first one. (Child overrides parent settings)

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

W3Schools has a good reference about the background property

note that the background color can be specified with background-color as well as with the background property.

They have: 9 posts

Joined: Apr 2009

HI EG and decibel.places !

Thanks for taking the time to try to help me.

I want to change the color around the website, the color of the background on which the website "sits".

Now I did change in the style sheet the body attributes and added background-color: #d3d3d3

Nothing changes.

So I don't know what else to do?

Do I need to put any referring tag into the html source code of my page?

If I chnage other things on the stylesheet I have no bother at all, it is only the website background color that does not want to change. There must be something that "blocks" the background color to be changed, but I don't know where and what I would need to adjust, add or delete from the source code.

Would you have any other ideas to solve this problem?

ES

greg's picture

He has: 1,574 posts

Joined: Nov 2005

new-to-css wrote:
Now I did change in the style sheet the body attributes and added background-color: #d3d3d3

Nothing changes.

That's because you made a new CSS ID by doing the following:

#body{
background-color: #D3D3D3;
color:black;
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size:13px;
margin:0;
padding:0;
}

It's not an ID called body you want, you are setting the style for the page body. The default element for the entire document body.

Remove the # from in front of the word body and it will work. Wink

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

to elaborate, let's say you created a p element with the #body id:

<p id="body"></p>

then your selector #body or p#body would work to set the background for THAT p container (not the whole document body)

however, I do not recommend using HTML document objects (body, head, etc) as class or id names

here is another page at W3Schools with many CSS examples you can try

They have: 9 posts

Joined: Apr 2009

Hi Greg and decibel.places!

Thanks very much for your help and advice!
Removing the # did resolve the problem.
Thanks again, you made my day Smiling)))
ES

greg's picture

He has: 1,574 posts

Joined: Nov 2005

new-to-css wrote:
Thanks very much for your help and advice!
No problem!

decibel.places wrote:
however, I do not recommend using HTML document objects (body, head, etc) as class or id names
Why not?

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

greg wrote:
decibel.places wrote:
however, I do not recommend using HTML document objects (body, head, etc) as class or id names
Why not?

because CSS is cascading and the properties flow from the general to the specific, but using page element names as class or id names can be confusing

so if you have a p element with a body class p.body, you might think that it applies to all elements in the body, whereas it only applies to p elements with the body class. then add in an h1 with body class h1.body and you are going to get really confused really quickly.

in the case of the OP, there is an id named body #body - and new-to-css thought that applied to the body element, while it only applies to an element with that id (and you cannot give multiple elements the same id name)

It's sort of an aesthetic thing, I prefer id and classnames that are unique and descriptive.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.