title: Html code isn't reading my css style script
body: <p>i'm trying to create a tabs bar but the css code isn't being red.
  I've Validated both the html code as well as the css code and i can't find any bugs.</p>
  
  <p>Here's the html: </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
          &lt;head&gt;
  
              &lt;title&gt; Canberras School Events Site &lt;/title&gt;
  
  
              &lt;link rel="styleSheet" type="text/css" ref="CSS/style.css"/&gt;
  
          &lt;/head&gt;
  
          &lt;body&gt;
  
              &lt;div id="tabs"&gt;
  
                  &lt;ul&gt;
                      &lt;li id="Selected"&gt;&lt;a href="Index.html"&gt;HOME&lt;/a&gt;
                      &lt;li class="NotSelected"&gt;&lt;a href="Pages\Events.html"&gt;EVENTS&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="NotSelected"&gt;&lt;a href="Pages\Places.html"&gt;PLACES&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="NotSelected"&gt;&lt;a href="Pages\Accommodation.html"&gt;ACCOMMODATION&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="NotSelected"&gt;&lt;a href="Pages\ContactUs.html"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
              &lt;/div&gt;
  
          &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>body {
  background-color: #f0ff00;
  }
  
  /* border for the 1366 x 768 (height will change so you may have a scroll bar) */
  
  
  /*This is the tabs*/
  
  #tabs ul {
      list-style: none;
      padding:0;
      margin:0;
      position: absolute;
      top:  5px;
      right: 10px;
      left: 200px;
      }
  
  #tabs li {
  
      display: inline;
      border: 1px solid;
      border-bottom-width: 1px;
      margin: 0 0.5em 0 0;    
  }
  
  #tabs li a {
      padding: 0 1em;
  }
  
  #content {
      border: 1px solid;
      clear: both;
  }
  #tabs #Selected {
      padding-bottom: 1px;
      background: #0101c3;
      color: #f0ff00;
  }
  .NotSelected{
      padding-bottom: 1px;
      background: #fff;
      color: #000000;
  }
  </code></pre>
  
  <p>not even the background is appearing. </p>