CODEWITHSUNDEEP
cssbackground
yuli chika
yuli chika

Reputation: 9221

How to set different body background color for different pages in one css files?

I have a few pages. page1 <body id="page1">, page2 <body id="page2">, page3 <body id="page3"> then I want write all the css rules in one css file 'style.css', set page1 background color:#000; page2 background color:#fff; page3 background color:#00f;

body #page1{background-color:#000;}
body #page2{background-color:#fff;}
body #page3{background-color:#00f;}

but it is wrong, how to write correctly? thanks.

Upvotes: 5

Views: 27519

Answers (3)

Soubhagya Kumar Barik
Soubhagya Kumar Barik

Reputation: 2595

You can do this through jQuery also.See the below example.

.bg-white{
background-color: #fff;
}


$(document).ready(function () {
    $('body').addClass('bg-white');
});

Upvotes: 0

fcalderan
fcalderan

Reputation: 

#page1{background-color:#000;}
#page2{background-color:#fff;}
#page3{background-color:#00f;}

you can also write

body#page1{background-color:#000;}

butbody selector is redundant (and slower) in this case.

Upvotes: 4

Pekka
Pekka

Reputation: 449525

Just remove the space (You want to specify all elements with the tag name body and the ID page1):

body#page1{background-color:#000;}

Upvotes: 8

Related Questions