title: Precedence of CSS stylesheet links with title attribute
body: <p>I have seen:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/964328/css-2-precedence-of-stylesheets-imported-using-link-element">CSS 2, precedence of stylesheets imported using link element</a></li>
  <li><a href="https://stackoverflow.com/questions/9459062/in-which-order-do-css-stylesheets-override">In which order do CSS stylesheets override?</a></li>
  <li><a href="https://stackoverflow.com/questions/16913131/can-one-css-file-take-priority-over-another-css-file">stylesheet - Can one CSS file take priority over another CSS file?</a></li>
  </ul>
  
  <p>They all seem to say that, for the same selector occurring multiple times, the last one wins. However that is not what happens for me. So given that "Aqua.css" has:</p>
  
  <pre><code>body {color:aqua;}
  </code></pre>
  
  <p>And "Red.css" has:</p>
  
  <pre><code>body {color:red;}
  </code></pre>
  
  <p>Then using the following:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="Red.css" title="Red"/&gt;
  &lt;style type="text/css"&gt;
  body {color: lime;}
  body {color: yellow;}
  &lt;/style&gt;
  </code></pre>
  
  <p>The last one, Yellow, is used, as the other answers say. If I change that however to:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  body {color: lime;}
  body {color: yellow;}
  &lt;/style&gt;
  &lt;link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="Red.css" title="Red"/&gt;
  </code></pre>
  
  <p>Then Aqua is used, not the last one, Red. See <a href="http://samsamples.atwebpages.com/StylesheetPrecedenceSample2.html" rel="noreferrer">Precedence of CSS rules Sample 2</a>. The body color is Aqua yet Aqua.css is before Red.css. All the answers I find say that the body color would be Red.</p>
  
  <p>Whenever I have multiple links to css stylesheets and the only difference among them is the color of something (element or class or whatever) then the <strong>first</strong> stylesheet is used, not the <strong>last</strong>, yet that seems to not be what everything I read says should happen. I have tried Edge, Chrome and IE; I notice no relevant difference among them.</p>
  
  <p>So I have the following two questions:</p>
  
  <ul>
  <li>Am I correct that the behavior I am seeing (the first link tag is used instead of the last) is different from the other answers?</li>
  <li>If so, then why?</li>
  </ul>
  
  <p>I apologize if I should have posted an answer to one of the other threads, but I think it is cleaner to create a new question.</p>
  
  <p>The reason I am asking is that I am trying to create a dynamic stylesheet system so understanding the precedence is more important, it is less effective to just try something to see what works than in normal circumstances. I will attempt to interpret the specifications but to the extent that has been in other answers, I want to understand what has been provided here in other threads.</p>