first week programing, getting ass kicked by stupid stuff every day : Example: 

This is my simple HTML document:

         <!DOCTYPE html>
          <html lang="en">

       <head> 
       </head>

           <body> 

              <section id="left"> Put an image anywhere in this box.</section>
              <section id="right"> </section>
          
    <img id="tree" src="file:///home/john/Desktop/javascripts%20basics           /ashtree.jpg">
        </body>

       <footer>
             <script src="john.js"></script>
             <link href="john.css" text="text/css" rel="stylesheets.css">
       </footer> 
 
     </html>


This is my simple CSS document:

       #left{float:left;
          width:250px;
          height:250px;
          margin:5px;
          border: 3px solid blue;}
      
     #right{float:left;
          width:250px;
          height:250px;
          margin:5px;
          border: 3px solid green;}


The HTML loads in my firefox web-browser, but the css does not.I downloaded chromium as well and it doest work either. Ive checked many examples and I think I got it right. The question is...where do I look next to solve this problem. I have no clue where to start as I am not very educated with computers. 


