Will css split into separate files makes any difference?

[tamilsweet]

A Basic doubt?

Having CSS split into multiple files makes any difference in rendering?

Means.....
Say, I have 3 CSS files and in the third file I have
*{
margin : 0;
padding : 0;
}

Will this reflect to whole page.

First impression I got is "It wont make a difference". ;)

I want to confirm this with experts here.......:)

[abduraooft]

Yes, * is the universal selector which selects all the elements in the entire document. But the effect may depends on the precedence. If there are some other rules specifying these values to some elements, then browser may consider them as well overriding the other rules.
Get firebug (http://www.getfirebug.com/) and see the way how browser computes the effective style.
PS: reducing the number of CSS.script files will increase the loading speed of the page. You may see this also through the NET tab in firebug!

[tamilsweet]

Firebug is very helpful......
I was using Firebug only to debug javascripts till now.....
Need to explore further about its usage.....

[VIPStephan]

Basically, any CSS you add to the page has an effect on it, regardless of how many files it’s comprised. The major rule of thumb is: if two different styles are applied to the same element the latter one overrules the former one. This can be within one CSS file, or it can be two styles in two stylesheets of which the one coming last in the HTML source code overrides styles from the first one(s).

This is also the principle after which alternative styles served through conditional comments work. They are added after the regular stylesheet and override the regular styles for IE only.

[Stooshie]

As VIP Stephan says, the rule is later styles override earlier ones.

Splitting into different files can be quite good practice. If it is done properly it can avoid any clashes.

For example you may have a stylesheet called structure.css which defines the basic layout of the page (widths, default font size etc...) You could then have one called sapphire.css and another one called emerald.css(identical except for the #values) and depending on, say, user preference, you can load either one which allows the user to select a colour scheme.

[effpeetee]

Stooshie,

Your Dundee city link is wrong.

http://www.dundeedcity.gov.uk/

Surplus "d"

Frank

[sobrien79]

As VIP Stephan says, the rule is later styles override earlier ones.

This isn't exactly true. Later rules of the same specificity will override each other. But consider the following code. If what VIP Stephen says is true then all three divs would be green. You'll see that all three are different colors. And none of them are black.

CSS:

div {
background-color: black; /*this will be overridden*/
height: 50px;
margin-bottom: 10px;
}
#myDiv {
background-color: yellow;
}
.divitis {
background-color: red;
}
div {
background-color: green;
}


<div class="divitis" id="myDiv">This is yellow.</div>
<div class="divitis">This is red.</div>
<div>This is green.</div>


The earlier rules apply because they have a higher specificity than the latter rules.

http://www.htmldog.com/guides/cssadvanced/specificity/

[Stooshie]

oops,

Thanks effpeetee.

[VIPStephan]

If what VIP Stephen says is true then all three divs would be green.

I should have said “basic rule of thumb”, not “major rule of thumb” because I didn’t wanna go into detail about specifity as the basic effect is the cascading/overruling effect, and specifity is just coming to the table when more advanced selectors are used. You’re right if you care to explain specifity completely.

[abduraooft]

LOL, that's why I just escaped by mentioning firebug ;)

[sobrien79]

You’re right if you care to explain specifity completely.

I'm still confused a bit on it. That's why I posted the link. :) I generally try to keep the selectors as simple as possible to avoid obscure bugs where specificity is concerned. But I just wanted to illustrate that an ID selector will take precedence over a class selector over a tag selector.