CSS @import Rules

[sourpatchkid]

Hello,

If you have a main style sheet (main.css) that imports, let's say, 2 others, like so:

@import url(first.css);
@import url(second.css);

would anything on first.css override repeated values in main.css? And then second.css would override both first.css and main.css?

I'm curious because I read that the last imported style sheet has the last say, but I have a main style sheet that imports a reset one (resets all margins and padding to 0). All of my margins and padding show up properly in multiple browsers, but I would think that the reset.css rules would override my given margins because it's imported last.

Or does this only apply to the imported style sheets and not the main linked one?

[drhowarddrfine]

Yes, the last imported stylesheet overrides previous imported rules. The order of specifying them is important and determines which is applied first.

[sourpatchkid]

Ok, so my main.css imports my reset.css (main.css has padding & margins and the reset.css resets all padding & margins to 0). So the reset.css should override the main.css, right? But it doesn't it any of the browsers I've tested it in (Safar, Opera (Mac/Win), FF (Mac/Win), IE).

[drhowarddrfine]

If the import rule is the first line then that is looked at first, but if a property is changed further down by something else then that's what you get. Am I following you correctly?

It's like an "insert" in a word processor. @import is saying "insert this other code here".

[iam_clint]

computers read top to bottom left to right just like (most) people do.


so say in your first css you have

.blah { margin-left: 0px; }

now you import another that says

.blah { margin-left: 1px; }


the margin-left will be 1px because it always reads top to bottom left to right.

[sourpatchkid]

I'm still confused.

Let's say I have a main.css that looks like this:

@import url(reset.css);
@import url(ieonly.css);
 
div#container  { margin: 20px auto; width: 600px; }

reset.css

div  { margin: 0; padding: 0; }

and the ieonly.css has a bunch of hacks in it.

Do the rules in the main.css override the imports because they come after imports in the flow of the file, or does the computer read all of main.css first, and then override those rules with the rules from the imports?

As of right now, I have my css set up like the example, and it works properly. I'm just trying to figure out the correct way.

[iam_clint]

ok so you have an import
main.css
and another ie.css

it reads all of main.css then reads ie.css second replacing anything styles that are different in main.css

its like this

c = c
c = b
c = a
c = d
c = f
c = c
c = 500
c = 2020


c will be 2020 no matter what those others say because it reads top to bottom left to right

[sourpatchkid]

In my html pages, I link to main.css and then from there the other style sheets are imported.

So when the @import for reset.css is at the top, the computer sort of inserts all of it's rules there and then travels down the rest of main.css, overriding anything that repeats? What about an an ie hacks css? Will is still work properly even if it comes before the main.css?

[drhowarddrfine]

Yes to both.