title: JQuery - change page background colour on button click
body: <p>I'm very new to jquery and am trying to change the page background colour once a button is clicked.</p>
  
  <p>I have searched and there are a quite a few questions on similar things, but I'm looking for an answer on a page background colour change specifically. </p>
  
  <p>I'd appreciate any help, thanks, Freddie</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;section class="text"&gt;
          CLICK THE BUTTON TO&lt;br&gt; CHANGE THE BACKGROUND!
      &lt;/section&gt;
  
      &lt;button id="btn"&gt;CLICK ME!&lt;/button&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      height: ;
      background: #D8D8D8;
  }
  
  .text {
      color: #686868; 
      font-family: arial;
      font-size: 2em;
      text-align: center;
      margin-top: 50px;
      margin-bottom: 20px;
  }
  
  #btn {
      margin-left: 550px;
      width: 200px;
      height: 100px;
      font-size: 2em;
      border-radius: 10px;
      background: #ffffff;
  }
  
  #btn:hover {
      background: #ff0000;
      color: #ffffff;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(button).click(function() {
      $(this).css('background', '#ff0000');
  )};
  </code></pre>