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

priority of external stylesheets

  • # March 21, 2013 at 7:30 am


    i have a basic ques here.

    m applying 3 stylesheets external on my html- S2,S3..

    my all these SS have same one id on whose different styling is applied:

    for example:

    #main_content {
    margin-bottom: 46px;
    padding-left: 66px;
    padding-right: 66px;


    #main_content {

    i need both s2 and s3 in my html. but i want only s3 to be applied for this particular id. now how to give priority .. !important is not good to use right?

    # March 21, 2013 at 7:44 am

    Please, you’re on a forum asking for help. Not on a chat talking to your mates. Try making sentences with a meaning please. I’m facing some issues figuring out what you mean by:

    > m applying 3 stylesheets external on my html- S2,S3..
    > my all these SS have same one id on whose different styling is applied:

    First of all, you shouldn’t have multiple stylesheets in most cases, only one.
    Secondly, I think there is a problem if you apply styles on a same element from different stylesheets; all rules for an element should be gathered at the same spot.

    Fixing these two things will probably fix your problem.

    # March 21, 2013 at 8:43 am

    I’m guess that these style sheets relate to different pages.

    If so, you can apply a different ID to each page in the body element for instance

    Then you can target each page with this in a single CSS sheet

    #page-1 #main_content {

    #page-2 #main_content {


    # March 21, 2013 at 12:20 pm

    i am not able to explain properly i guess.

    i have another ques:

    below is the css:

    display: none;
    margin: 0 auto;
    width: 980px;

    display: none;
    margin: 0 auto;
    width: 850px;
    i have a div here using both classes. Both classes i want to use as i am applying some jquery.

    # March 21, 2013 at 12:26 pm

    It doesn’t make any sense to use both of those classes as they both do exactly the same thing except for changing the width.

    I can’t understand why you would do that.

    # March 21, 2013 at 12:35 pm

    height also is different. and the class talkNowOptions is used across many divs and i am applying jquery on this class.

    what should i do if for a particular div i want different width and height but i want to apply jquery on that also. what would be your suggestion?

    # March 21, 2013 at 12:47 pm

    There is no height property in the second class that you gave

    If the height is different use a different class…don’t chain them unnecessarily. Although, **generally** the content should set the height.

    If you are repeating styles then find a way of reducing that.

    You need a hidden div centered div (although I wouldn’t) then give that a class of it’s own and apply it to both divs.

    .hidden-center {
    margin:0 auto;

    then do

    .talkNowOptions {
    width: 980px;

    .talkNowEnterSerialScreen {
    width: 850px;

    You will still apply two classes to the divs but the classes now do two separate things and your code is a lot neater and more compact.

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

You must be logged in to reply to this topic.