title: How do i combine html, css and javascript coding to make my carousel work?
body: <p>I have the following code split into html, css and javascript, but i do not know how to combine them in notepad so i can embed it onto my website.  (The image sources and texts are just examples.)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;div id="text"&gt;
      &lt;h3&gt;Geneva International Motor Show&lt;/h3&gt;
      &lt;p&gt;The Geneva International Motor Show will open to the public from 03 to       13 March, presenting more than 260 exhibitors and more than 175 world and European premieres. 02 March 2011.&lt;br /&gt;
          &lt;small&gt;Source: &lt;a href="http://gigapica.geenstijl.nl/2011/03/geneva_international_motor_sho.html" target="_blank"&gt;gigapica.geenstijl.nl&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="images"&gt;
      &lt;div id="a"&gt;
          &lt;img src="img/car1.jpg" alt="car1" width="275" height="200" /&gt;
          &lt;span&gt;The new Swiss Sbarro TwoFort100 Concept car is shown during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, on 01 March 2011. &lt;/span&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;img src="img/car2.jpg" alt="car2" width="275" height="200" /&gt;
          &lt;span&gt;The new Toyota FT-86 II Concept car on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011. &lt;/span&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;img src="img/car3.jpg" alt="car5" width="275" height="200" /&gt;
          &lt;span&gt;The new Renault Dezir Concept car is on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011. &lt;/span&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;img src="img/car4.jpg" alt="car6" width="275" height="200" /&gt;
          &lt;span&gt;The new Dodge Challenger SRT8 392 is on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011.&lt;/span&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;img src="img/car5.jpg" alt="car8" width="275" height="200" /&gt;
          &lt;span&gt;The new Nissan Esflow Concept car is on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011. &lt;/span&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;img src="img/car6.jpg" alt="car9" width="275" height="200" /&gt;
          &lt;span&gt;A study of Volkswagen named Bulli is on display at International Geneva Motor Show at the Palexpo fairground in Geneva, Switzerland, 03 March 2011&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code> html, body {
      height: 100%;
      padding: 0;
      margin: 0;
      }
      body {
      min-height: 650px;
  }
      body * {
      font-family: Arial, Geneva, SunSans-Regular, sans-serif;
      font-size: 14px;
      color: #333;
      line-height: 22px;
  }
  
      #wrapper {
      width: 825px;
      margin: 0 0 0 -412px;
      position: absolute;
      left: 50%;
      top: 30px;
  }
      #text h3 {
      font-size: 26px;
  }
      #text small, #text small * {
      font-size: 12px;
      color: #666;
  }
      #images {
      width: 900px;
      overflow: hidden;
  }
      #images div, #images img {
      display: block;
      float: left;
      width: 275px;
      height: 200px;
  }
      #images span {
      background-color: black;
      color: #ccc;
      display: block;
      float: left;
      width: 215px;
      height: 160px;
      padding: 40px 30px 0 30px;
      }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(function() {
      $('#images &gt; div').each(function() {
          var $cfs = $(this);
          $cfs.carouFredSel({
              direction: 'up',
              circular: false,
              infinite: false,
              auto: false,
              scroll: {
                  queue: 'last'
              },
              items: {
                  visible: 1,
                  width: 275,
                  height: 200
              }
          });
          $cfs.hover(
              function() {
                  $cfs.trigger('next');
              },
              function() {
                  $cfs.trigger('prev');
              }
          );
      });
      });
  </code></pre>
  
  <p>Any help on this would be much appreciated guys!!!</p>