calling another css file

[guysoul]

Hi experts,

I have three css files (main.css, style81.css and style86.css) .

On main.css. i have this script

body {
background-image: url(/gfx/style/81/css-files/background_new_02.gif);
background-color: #ffffff;
padding: 0px;
margin: 0px;

On style81.css and style82.css, i have this script
@import url(main.css);

The thing here, i want to use different background image on my child css..

how would I do that here?

Regards,

Ed

[Paulie_D]

I don’t understand.

Do you mean that having set a background-image on your body you want to change it for all pages or are those stylesheets 81/86 specific to individual pages.

[guysoul]

sorry for the confusion.

stylesheets 81 and 86 specific to individual pages. and they have different bg images.

[Paulie_D]

In that case, as long as you import the ‘main’ sheet first then anything you type after that will take effect.

Just declare a new bg image for the body.

If that is the only change you are making (or there are only a few) then you might just want to give those individual pages a special body class or ID and just target them in your main CSS file.

[JohnMotylJr]

@guysoul,

Exactly what Paulie_D is saying. You can simply add a class or id to the body/html tag of your .html / .php files and include the style in your main stylesheet. Are you attempting to do anything dynamic by loading different stylesheets?

index.html

< body>< /body>

page1.html

< body class="style81">< /body>

page2.html

< body class="style86">< /body>

main.css

body {

background:#BADA55;

}



body.style81 {

background:url(path/to/image_1.png);

}



body.style86 {

background:url(path/to/image_2.png);

}

Obviously you would want to name your class a little more semantically.

[Author]

Posts