Hi all, Quick question about changing background colour on various pages once links are clicked - something like this: http://www.webfactory.ie/ Is there a way of doing this with css? I know to just set the bgcolor in the css document but I'd need about 5 different colours etc. Thanks, Le007
maybe you could use another css file on each page? Like in the index page you have your main css file like main.css and then in the another page you have your main.css file(but removed the background color attribute) and also another css file like greenbg.css where you just put your background color codes. This way the page uses the main.css for everything else and greenbg.css just for the background. Dunno if this works or maybe there´s a simpler way.
It is the "dhtml+css" technolog and not hard to make it. There is also an example for you study, msn.com . Just review the source code and css and learn from them .
Thanks for the replies - I don't see how to just remove the bgcolor from main.css for one page to another? Any ideas?
Sorry..i was talking jibberish. You could have in your index page the main css file with everything. And then in subpages you just create another css file named ex. greenbg.css where you have everything same as you did have in the index page css file but you´ve just replaced the background color in your body to green. Like this. main css file: body { background: #000; margin:0; padding:0; } p { margin:7px 0 0 10px ; padding: 10px ; font: normal 0.8em Verdana; color: #EFEFEF; line-height: 1.5em; } .media { margin:7px 0 0 17px ; padding: 0 0 5px 0 ; font: normal 0.8em Verdana; color: #EFEFEF; line-height: 1.5em; } etc etc. greenbg.css body { background: green; margin:0; padding:0; } p { margin:7px 0 0 10px ; padding: 10px ; font: normal 0.8em Verdana; color: #EFEFEF; line-height: 1.5em; } .media { margin:7px 0 0 17px ; padding: 0 0 5px 0 ; font: normal 0.8em Verdana; color: #EFEFEF; line-height: 1.5em; } etc etc. And then in your html: index page: <!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" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <meta name="keywords" content=""/> <link rel="stylesheet" type="text/css" href="main.css" media="screen"/> <title>YOUR TITLE</title> And subpage: <!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" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <meta name="keywords" content=""/> <link rel="stylesheet" type="text/css" href="greenbg.css" media="screen"/> <title>YOUR TITLE</title> Does this make sense?
yes you can easily do all that with css. main point of css is to change things with just one change/click
Lawlz. Have one CSS sheet, and give each page's body an id or a class. body { a colour; } #mainpage { another colour; } #contact { annother colour; } contact page: <body id="contact"> blah blah blah... I use that to set different background images on different pages (and that's just one way, there are others). You could also script this into the back end but I'm lazy and instead of learning a programming language I just use CSS. : )