Proximity and Precedence in CSS

The code of this page can be used to demonstrate an important aspect of the CSS cascade. The cascade is the set of rules that determines what takes precedence when selectors of the same specificity attempt to affect the same element with using the same property but having different values for that property.

This file is an example file for demonstrating how proximity determines precedence when selector specificity is the same.

  1. The CSS background-color property is being specified using the body element as the selector.
  2. But there are two different rulesets:
    1. One specifies a background-color of lightblue and the other pink.
    2. One is in an external CSS file that is linked to using the <link> element in the <head> of this file and the other is embedded in the <head> of the file using the <style> element.
    3. However, note that they could both be in either location and the same proximity rule, explained below, will apply.
  3. Please look at the source code for this page.
  4. When an HTML file has a CSS rule embedded in a <style> element in the <head> of it and also has a link to an external .css file containing the identical CSS ruleset but having a different CSS property value, the rule with the greatest proximity to the element will take precedence.
  5. Note that the location in the code of the link to the external CSS file can be thought of as having the code from that linked-to file being put in the location of the <link> element in the code. This effectively puts the css code from the external .css file into the location where the link to it is in the HTML file.
  6. You will see that:
    1. If there are two identical selectors (in this example the body selector) that have the same property (such as the CSS background-color property, as is used in the code of this example file)...
    2. ...but when each ruleset specifies a different background-color value:
      1. In this example one CSS ruleset specifies background-color:pink;
      2. ...the other specifies background-color:lightblue;
    3. It is the ruleset code with the most proximity to the element that will take precedence.

Many claims have been made that css rules in embedded <style> elements always take precedence over the code in an external CSS file. Actually, it is the proximity to the HTML element that is to have the property applied to it relative to the effective location of the CSS ruleset that determines precedence.

For example, in the case of this file there is a CSS ruleset in the <style> element and an identical ruleset in the linked-to .css file. However, each specifies a different background-color.

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 in your browser and select View Page Source, or Page Source, or a similar term depending on the browser type. The page's source code will open up.
  2. Use Ctrl-A (⌘-A on Mac) to select all the code.
  3. Then copy the code.
  4. Paste it into an empty plain text file such as a Notepad file in Windows or a TextEdit file on a Mac BUT first follow these directions first to set TextEdit to use plain text instead of RTF, which is TextEdit's default file format.
  5. Save the file using any name you like, but be certain to end the file name with .html (NOT .txt ...you may need to manually enter .html to replace .txt).
    • When using TextEdit on a Mac, do not attempt to bypass the preference settings specified in the link above and simply change the file extension from .rtf to .html. Changing the file extension does not change its file type.
    • Remember where you saved it!
    • Do not close the file.
  6. Go to your web browser and press Ctrl-O (⌘-O Mac) - that is the letter "O" not a zero/zed.
  7. Find and open the .html file you just saved.
  8. Notice background color.
  9. Return to the file in Notepad or TextEdit
  10. Switch the positions in the code of the <link> and the <style> elements.
  11. Save the file.
  12. Refresh your browser window (Ctrl-R or ⌘-R).
  13. The color ought to change.
  14. To test how the HTML style attribute will have even greater precedence, add the following to the <body> tag:
    <body style="background-color:yellow;">
    • It ought to take precedence due to both proximity and specificity (this so-called inline CSS has very high precedence).

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

Further info