CSS
-Tricks
treehouse :
what would you like to learn today?
Web Design
Web Development
iOS Development
Show search box
Search
Search in:
All
Articles
Forums
Snippets
Videos
✕
Home
Forums
Snippets
Gallery
Videos
Almanac
Demos
Lodge
Navigation 'n' Search
Forums
Illustration by Nick Sirotich
Forums
»
CSS Combat
Multiple Header Colors
ponyack
Permalink to comment
#
September 2008
Hi,
I have six pages and each header needs to have its own color.
Any suggestions on what would be the best way to accomplish this?
Thanks
Michael
Permalink to comment
#
September 2008
hmm, not sure what you mean but maybe this helps you:
what about giving each page body a unique ID and then style it in the CSS?
<body id=\"page1\">
#page1 .header {
color: green;
}
ponyack
Permalink to comment
#
September 2008
Thanks for the reply.
Sorry for the confusing question. I am still new to CSS
I have three divs [header,wrap,footer] each has a background image applied to it.
On each page I need a new background image.
So on my home page inside the divs the background image would be blue.
Then on the about us inside the dive the background image would be yellow.
I know there is a better way to explain this but please bear with me.
hope this makes some kind of sense
but any help would be great
Thanks
brandon
Permalink to comment
#
September 2008
same concept
#page1 .header {
color: blue;
background: url(/path/to/your/image)
}
In order to leave your markup the same, have some CSS that relates to each custom page
ponyack
Permalink to comment
#
September 2008
Great,
i will give i a try.
Thanks for the reply.
ponyack
Permalink to comment
#
September 2008
Okay,
I figured it out. But thanks for the help.
Add a Comment
I have six pages and each header needs to have its own color.
Any suggestions on what would be the best way to accomplish this?
Thanks
what about giving each page body a unique ID and then style it in the CSS?
#page1 .header {color: green;
}
Sorry for the confusing question. I am still new to CSS
I have three divs [header,wrap,footer] each has a background image applied to it.
On each page I need a new background image.
So on my home page inside the divs the background image would be blue.
Then on the about us inside the dive the background image would be yellow.
I know there is a better way to explain this but please bear with me.
hope this makes some kind of sense
but any help would be great
Thanks
#page1 .header {
color: blue;
background: url(/path/to/your/image)
}
In order to leave your markup the same, have some CSS that relates to each custom page
i will give i a try.
Thanks for the reply.
I figured it out. But thanks for the help.