View Single Post
  #2  
Old 10-28-2008, 08:36 AM
Vodstok's Avatar
Vodstok Vodstok is offline
Fear scented candle
 
Join Date: Jan 2004
Location: The edge of forever
Posts: 13,650
Now save it and refresh your html page. That is a downright awful color on its own, but it certainly gets the point across. Now, edit your html page real quick, type something clever in a paragraph tag and save it.
<p>Something Clever</p>

Now, in your css file, add this:
body
{
background-color:Lime;
color:Yellow;
}

Now save them both and refresh your browser. You are probably now working on one hell of a headache. However, here is where we learn another fun rule of css:
Styles applied to a tag take precedence over those applied to the containing tag. Basically, the body style says that the background color I slime green and its text is difficult to read yellow, but if we tell it to do something less horrible with the p tags, it will win over. Add this After the closing curly bracket for the body style, thusly:
body
{
background-color:Lime;
color:Yellow;
}

p
{
background-color:Maroon;
color:Silver;
}


Now save and refresh your browser. There, much nicer, eh? Css is very flexible, so if you delete one of the properties in the p style, the body style immediately takes it over. Go ahead and delete the color:silver line, save and refresh and see the difference.

This is just barely a scratch on the surface of what can be done with css, but it should get some base concepts down.
Reply With Quote