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?

    Regards,

    Ed

    # 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

    @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.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".