priority of external stylesheets

[pallavi1811]

HI

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:
S2:

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

S3:

#main_content {
padding:0px;
}

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?

[Kitty Giraudel]

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.

[Paulie_D]

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 {
}

etc.

[pallavi1811]

i am not able to explain properly i guess.

i have another ques:

below is the css:

.talkNowOptions{
display: none;
margin: 0 auto;
height:320px;
width: 980px;
}

.talkNowEnterSerialScreen{
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.

#129205

Paulie_D

Member

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.

#129210

pallavi1811

Participant

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?

#129214

Paulie_D

Member

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 {
display:none;
margin:0 auto;
}

then do

.talkNowOptions {
height:320px;
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.

[Paulie_D]

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.

[pallavi1811]

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?

[Paulie_D]

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 {
display:none;
margin:0 auto;
}

then do

.talkNowOptions {
height:320px;
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.

[Author]

Posts