New to CSS - how to put background color into style sheet?
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 posted this at 10:19 — 30th April 2009.
He has: 1,581 posts
Joined: Nov 2005
Hi, welcome to TWF new-to-css
(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 posted this at 13:23 — 30th April 2009.
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.
olecranon posted this at 19:00 — 30th April 2009.
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 posted this at 19:30 — 30th April 2009.
He has: 1,581 posts
Joined: Nov 2005
Nothing changes.
#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.
decibel.places posted this at 21:34 — 30th April 2009.
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
olecranon posted this at 00:19 — 1st May 2009.
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
ES
greg posted this at 06:37 — 1st May 2009.
He has: 1,581 posts
Joined: Nov 2005
decibel.places posted this at 19:26 — 2nd May 2009.
He has: 1,494 posts
Joined: Jun 2008
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 classh1.bodyand 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.