title: Create a CSS rule / class with jQuery at runtime
body: <p>Usually I have a CSS file which has the following rule:</p>
  
  <pre><code>#my-window {
      position: fixed;
      z-index: 102;
      display:none;
      top:50%;
      left:50%;
  }
  </code></pre>
  
  <p>How can I avoid creating such a static CSS file by adding the CSS information during runtime actions to the body, or something similar? (only using jQuery)</p>
  
  <p>I want to define it once but with jQuery and use it many times later; that's why I do not want to add it each time to the specific DOM elements.</p>
  
  <p>I know the simple features (<code>css("attr1", "value");</code>), but how can I create a complete reusable CSS rule?</p>