How to have different color on each page

Hi, for the life of me I can’'t seem to find a solution to getting the coding right. I have 3 pages on my site and would like to have a different background color on each page’s header.

I’ve just learned CSS a few days ago so not everything has kicked in yet. Please help! Thank you!

Hi stoppe! Welcome to SitePoint. :slight_smile:

One nice way to do this is to put a unique class on the body tag of each page. E.g.

<body class=“home”>
<body class=“about”>
<body class=“contact”>

Now, let’s say your header has an ID of #header, such as:

<div id="header>


In the CSS, then do this:

.home #header {background: red;}
.about #header {background: blue;}
.contact #header {background: green;}

That’s the basic principle I use. Hope that helps. :slight_smile:

Can you supply a sample of your pages and also mention what you have already tried.

Thanks ralph for those suggestions, I’ll try 'em when I can. I’m having a slight problem with my site in that when I visit the pages it’s being directed to my host’s homepage instead, with an error on the url.

When I asked for help, the people hosting my site said they could see spaces such as “%20” in between words (ex: my%20site%20). I checked and re-checked my markup however and those spaces don’t exist.
It’s a little frustrating when you can’t see what they’re seeing. Also, my site was up and running with no hiccups up until this point, don’t know what I could’ve done wrong.

Hi John, I’ll share my pages once I stop pulling my hair, I mean when I figure all these things out.:smiley:

Make sure that you write the name of the page exactly as you name it. Many web servers are case sensitive, and Index.html will not be the same as index.html. So if you write it the wrong way, you will get an error and be redirected somewhere else.

Thanks molona. I think I got it figured out. Now I can finally play around with my site.

Okay, it’s not actually the header where I need to change the background color (cuz when I did that, only the border color was changed). I figured out that it’s within the h1 id where I need to change it:
h1 {
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size: x-large;
background-color: green;
color: white;

So how can I change the green color to another color on my other pages? Thanks again!

Same code as above, simply change #header for h1

Yes, so to be explicit:

Add body classes:

<body class="home">
<body class="about">
<body class="contact">

and in the CSS, then do this:


.home h1 {background: red;}
.about h1 {background: blue;}
.contact h1 {background: green;}

Alright! I’m gonna try it later, thanks guys!