title: HTML and CSS are not linking/ communicating
body: <p>I am new to HTML coding, and so far, I am really hooked! But, I have run into quite a problem... my HTML and CSS do not link together properly. I have taken several tutorials, but change the outcome of my website. Is there, outside of the code, a means of linking the two, besides being in the same file, that I am missing? Or am I simply messing up? Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "UTF-8" backround-color: black;
   font-family: Verdana, Geneva, Arial, sans-sarif;
   padding:0px;
   margin:0px;undefined}undefined/* CSS Document */undefined/* The body tag style applies to all elements on the page*/undefined body {
   wrapper {
       width: 960px;
       height: 800px;
       margin-left: auto;
       margin-right: auto;
       background-color: #F25F29;
  }
  /* The column-1 ID style is floated right*/
   column-1 {
       float;
       right;
       width: 600px height: 600px;
       background: #55D9D9 
  }
  /* The column-2 ID style is floated left*/
   column-1 {
       float;
       left;
       width: 360px height: 600px;
       background: #F2B544 
  }
  /* Selector for tags seperated by commas applies the style to all tags*/
   h1,h2,h3,h4,h5,h6,p,li {
       margin-left: 15px;
  }
   h1 {
       color: white;
       padding-top: 15px;
  }
  /* Selector for tags not written in commas applies in specific circumstances*/
   column-1 h1 {
       padding-top:5px;
       color: black;
       font-size:36px;
  }
  /* Advanced web design relies on class or ID style boxes*/
   .box {
       height: 100px;
       width: 100px;
       float: left;
       margin:15px;
       padding:25px;
       background: #A8D977;
       border:2px solid gray;
  }
  /* The following pseudo-code applies to the box class when in a hovered state*/
   .box:hover {
       background-color: #F2B544;
  }
  /* This clear class style terminates float*/
   .clear {
       clear: both;
  }undefined}undefined header, footer ( background-color: F27830;undefined color: red;undefined padding-top:5px;undefined padding-bottom:5px;undefined</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--The HTML5 doctype (document type) decloration is very simple-&gt; &lt;!DOCTYPE HTML&gt; &lt;!--All page content is inside the HTML element--&gt;
  &lt;html&gt;
  &lt;!--Head element content is not visable in a browser window--&gt;
  
  &lt;head&gt;
      &lt;!--The UTF-8 character set supports all symbols and characters--&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;HTML TEMPLATE&lt;/title&gt;
      &lt;!--The following link links to our style sheet file--&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt; &lt;/head&gt;
  &lt;!--Content visable in the browser's window is inside the html element--&gt;
  
  &lt;body&gt;
      &lt;!--All our content is enclosed in the wrapper ID style--&gt;
      &lt;div id="wrapper"&gt;
          &lt;h1&gt;Heading One Content&lt;/h1&gt;
          &lt;!--column-2 ID style is floated left and used for navigation--&gt;
          &lt;div id="column-2"&gt;
              &lt;h2&gt;Links...&lt;/h2&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;h3&gt;
                          &lt;a href="#"&gt;Link 1&lt;/a&gt;
                      &lt;/h3&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;h3&gt;
                          &lt;a href="#"&gt;Link 2&lt;/a&gt;
                      &lt;/h3&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;h3&gt;
                          &lt;a href="#"&gt;Link 3&lt;/a&gt;
                      &lt;/h3&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;!--column-1 ID style is floated right and used for content--&gt;
          &lt;/div&gt;
          &lt;div id="coulmn-1"&gt;
              &lt;h1&gt;Right Coulmmn Heading Here &lt;/h1&gt;
              &lt;p&gt; Right column content here &lt;/p&gt;
              &lt;div class="box"&gt;
                  &lt;p&gt;Box Content&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="box"&gt;
                  &lt;p&gt;Box Content&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="box"&gt;
                  &lt;p&gt;Box Content&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--The clear class style clears (removes) float--&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;h4&gt;Contact info here &lt;/h4&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>