By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,879 Members | 1,809 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,879 IT Pros & Developers. It's quick & easy.

CSS @import Rules

P: 4

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
Share this Question
Share on Google+
8 Replies

Expert 5K+
P: 7,435
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

P: 4
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

Expert 5K+
P: 7,435
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

Expert 100+
P: 1,208
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

P: 4
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

Expert 100+
P: 1,208
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

P: 4
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

Expert 5K+
P: 7,435
Yes to both.
May 1 '07 #9

Post your reply

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