Proximity and Precedence

What takes precedence in CSS:
embedded <style> rules, or...
external css file rules, or...
inline rules?

Many claims have been made that css rules in embedded <style> tags always take precedence over any <link> made to an external style sheet file (.css).

Actually, proximity to the html <body> determines it. For example:

Note:

Use the html in this page's code to prove that proximity controls format when specificity is equal.

  1. Right click anywhere on this page and select View Page Source, or Page Source, or a similar term. The page's source code will open up.
  2. Use Ctrl-A (⌘-A on Mac) to select all the code.
  3. Copy the code.
  4. Paste it into an empty plan text file such as a Notepad file in Windows or a TextEdit file on a Mac (but follow these directions first for Mac's TextEdit's settings).
  5. Save the file using any name you like, but be certain to end the file name with .html (NOT .txt).
    • Remember where you saved it.
    • Do not close the file.
  6. Go to your browser and press Ctrl-O (⌘-O).
  7. Find and open the file you just saved.
    • If you cannot find it, you probably saved it without the .html file extension.
  8. Notice background color.
  9. Return to the file in Notepad or TextEdit
  10. Move the <link> element code above the <style> element.
  11. Save the file.
  12. Refresh your browser window (Ctrl-R or ⌘-R).
  13. The color ought to change.
  14. For an additional test, add the following to the <body> tag:
    <body style="background-color:lightgray;">
    • It ought to take precedence due to both proximity and specificity (inline CSS as the highest specificity).

This demonstrates that rule proximity determines style, not whether the CSS is embedded or external.

Further info