The rule that is declared last wins, if they have equal weight.
In your last example the style from the link element is
declared later than the style in the style-element so it wins.
Code:
<html>
<head>
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
<link href="link.css" rel="stylesheet" type="text/css" />
</head>
...
Thread: Rules - Style Sheet Precedence Question  |
|||||||||||||
|
Started 1 month, 2 weeks ago by erj145
So the basic rules are:
1) Author style sheets
2) User style sheets
3) Default browser sheets
Now when you get into Author style sheets...
You have: inline styles, header style information (<style type="text/css"> </style>), external style sheets and imported style sheets.
I created a little example for myself to figure out the precedence. So that if all of these...
|
|
||||||||||||
|
|||||||||||||
Other posts in this thread:
Akh replied 1 month, 2 weeks ago
Size: 1,429 bytes
Customize: 
DonR replied 1 month, 2 weeks ago
I think this should be stickied if it isn't already.
Really good info for those starting to learn CSS.
Size: 166 bytes
Customize:
erj145 replied 1 month, 2 weeks ago
Thanks for the info.
It seems that the order of precedence is:
1) Inline styles
2) Header style information
3) External Style Sheets
External style sheets are composed of:
A) Linked style sheets.
B) Imported style sheets.
The exception is that linked style sheets are of equal weight compared to header style information, whereas imported style sheets are ...
Size: 526 bytes
Customize:
Akh replied 1 month, 2 weeks ago
Not quite right. As I said the style that is declared last wins if they have the same specificity value.
You could have
Code:
<style type="text/css">
p {
color: blue;
}
</style>
<style type="text/css">
@import url(import.css);
</style>
Where the imported css file would overrule the embedded style.
Size: 695 bytes
Customize:
Akh replied 1 month, 2 weeks ago
Size: 0 bytes
Customize:
erj145 replied 1 month, 2 weeks ago
Ok, I think I got it now.
So the order of precedence is established by specificity.
1) Inline Styles
2) Header Style Information AND External Style Sheets.
Point 2: Whichever has the greatest specificity wins.
Size: 324 bytes
Customize:
erj145 replied 1 month, 2 weeks ago
Size: 0 bytes
Customize:
erj145 replied 1 month, 2 weeks ago
If that is the case...
Why wouldn't the style within import.css win in this case:
Code:
<style type="text/css">
P {
color: red;
}
@import url(import.css);
</style>
Both declarations have the exact same style with the exception of color value. Based on specificity, they would both be equal. Yet the header style information wins over the ...
Size: 729 bytes
Customize:
erj145 replied 1 month, 2 weeks ago
Size: 0 bytes
Customize:
Akh replied 1 month, 2 weeks ago
No, browsers should ignore that @import rule.
@import rules must precede all other rules (except the @charset rule, if present).
http://www.w3.org/TR/CSS21/cascade.html#at-import
CSS 2.1 user agents must ignore any '@import' rule that occurs inside a block or after any non-ignored statement other than an @charset or an @import rule.
http://www.w3.org/TR/CSS21/...
Size: 698 bytes
Customize:
|
Top contributing authorsRelated threads on "Dev Shed Forums - Open Source web development":Related threads on other sites: |
||||||||||||
Thread profile page for "Rules - Style Sheet Precedence Question" on http://www.devshed.com.
This report page is a snippet summary view from a single thread "Rules - Style Sheet Precedence Question", located on the Message Board at http://www.devshed.com.
This thread profile page shows the thread statistics for: Total Authors, Total Thread Posts, and Thread Activity
Home |
About Us |
Submit Your Site |
Update Your Site |
Get Search For Your Site |
Partners |
Contact |
Search Plugin |
Blog |
 |
Last Searches | Top Searches |
Designated brands and trademarks are property of their respective owners.
Use of this website constitutes acceptance of BoardReader's User Agreement and Privacy Policy.