Treehouse: Grow your CSS skills. Land your dream job.

calling another css file

  • # November 8, 2012 at 7:34 am

    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?



    # November 8, 2012 at 7:36 am

    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.

    # November 8, 2012 at 7:40 am

    sorry for the confusion.

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

    # November 8, 2012 at 8:01 am

    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.

    # November 8, 2012 at 2:05 pm


    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?


    < body>< /body>


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


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


    body {

    body.style81 {

    body.style86 {

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.