468,316 Members | 2,114 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,316 developers. It's quick & easy.

CSS @import Rules


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?
Apr 26 '07 #1
8 4901
7,435 Expert 4TB
Yes, the last imported stylesheet overrides previous imported rules. The order of specifying them is important and determines which is applied first.
Apr 26 '07 #2
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).
Apr 27 '07 #3
7,435 Expert 4TB
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".
Apr 27 '07 #4
1,208 Expert 1GB
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.
Apr 27 '07 #5
I'm still confused.

Let's say I have a main.css that looks like this:
Expand|Select|Wrap|Line Numbers
  1. @import url(reset.css);
  2. @import url(ieonly.css);
  4. div#container  { margin: 20px auto; width: 600px; }
Expand|Select|Wrap|Line Numbers
  1. 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.
Apr 30 '07 #6
1,208 Expert 1GB
ok so you have an import
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
Apr 30 '07 #7
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?
Apr 30 '07 #8
7,435 Expert 4TB
Yes to both.
May 1 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Olivier Noblanc ATOUSOFT | last post: by
1 post views Thread by Joachim Spoerhase | last post: by
7 posts views Thread by Ron Adam | last post: by
3 posts views Thread by Markus | last post: by
reply views Thread by Gabriel Genellina | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.