title: change some css property in a wordpress theme using jquery
body: <p>I want to create one(or two) button(s) to switch my theme from dark to bright, i didn't know anything about jquery but I read something in w3schools and other references so I wrote a Jquery function that change some properties in my css file:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
      $("button").click(function(){
          $("p").css({
              "color": "white",
  
          });
          $("div").css({
  "background-color" : "black",});
      });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I put this script in bottom of header tag in header.php file, and I add a button to the footer of site</p>
  
  <pre><code>&lt;button class="bright"&gt;طرح روشن&lt;/button&gt;
  </code></pre>
  
  <p>but when I click on the button nothings happen, when I try this code on <a href="http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_css_property_sets" rel="nofollow">w3shcools editor</a> it works but the button in <a href="http://rangeman.ir" rel="nofollow">my wordpress site</a> does nothing.
  here is my code in W3shcools editor:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
      $("button").click(function(){
          $("p").css({
              "color": "white",
              "background-color": "#98bf21",
              "font-family": "Arial",
              "font-size": "20px",
              "padding": "5px"
          });
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;button&gt;Set multiple CSS properties for all p elements&lt;/button&gt;
  
  &lt;p&gt;This is a paragraph.&lt;/p&gt;
  &lt;p&gt;This is another paragraph.&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And if there is a way to call that function with "href" I will grateful to help me how can I call it.</p>