title: JavaScript or Jquery, create style rule
body: <p>So, it's easy enough to do something like</p>
  
  <pre><code>$('.someClass').css(....);
  </code></pre>
  
  <p>That adds an inline style directly into the HTML. But what if I wanted to create an actual rule?</p>
  
  <pre><code>.someClass {
    ....
   }
  </code></pre>
  
  <p>And then be able to edit that new rule on something like window.resize().</p>
  
  <p>What I am trying to do is write a script that generates a font size dynamically, and then applies it to all elements of a certain class equally (it resizes the text so that it stays on one line). Every time the window resizes, the script sets the font to 3, and then loops through, incrementing the font size by 1, until it is as big as it can be without breaking to another line (exceeds a given height). Here is the full script for reference.</p>
  
  <pre><code>$.fn.fitText = function (height) {
    return this.each(function () {
      console.log(this);
      $(this).css('font-size', '3px');
      var newSize;
  
      while ($(this).height() &lt; height) {
        newSize = parseInt(jq11(this).css('font-size'), 10) + 1;
        $(this).css('font-size', newSize);
      }
  
      newSize = parseInt($(this).css('font-size'), 10) - 1;
      $(this).css('font-size', newSize);
  
    });
  };
  </code></pre>
  
  <p>That works, in that I can call </p>
  
  <pre><code>$('.sectionTitle').fitText(25);
  </code></pre>
  
  <p>And it will run on all instances of that text, increasing their sizes until they are as big as they can be and still be less than 25px high (one line). But it does it to each element individually, leading to varying text sizes and just looks goofy. I'd like it so that it calculates the maximum font size that it can set so that none of the elements is more than one line, and then applies that style to all elements. </p>