title: Adding CSS settings to a new JQuery Plugin
body: <p>I'm new to this sort of thing but i've created a simple plugin which i hope to end up being a simple WSIWYG editor.</p>
  
  <p>Here is my simple settings part of my plugin</p>
  
  <pre><code>$.fn.ap_wysiwyg = function(options){
          // extend the option with the default ones
          var settings = $.extend({
              width : "800px",
              height : "600px",
          },options);
  </code></pre>
  
  <p>Here is the inline script inside my HTML to call the plugin</p>
  
  <pre><code>$(document).ready(function(){
    $("#ap-wysiwyg").ap_wysiwyg({
      width : "600px",
      height : "400px",
      css : {
        'background-color' : '#000'
      }
    });
  });
  </code></pre>
  
  <p>Quite simply the width and height from the inline html is overwriting the default settings from my main script which is fantastic but i'm attempting to add CSS such as background-color and margin but they dont seem to be applying in my html. As it stands my div inside html has a style of width: 600px; and height: 400px which is perfect but it's skipping my CSS styling that i wish to manually apply.</p>
  
  <pre><code>var containerDiv = $("&lt;div/&gt;",{
             css : {
                 width : settings.width ,
                 height : settings.height,
                 border : "1px solid #ccc"
             }
         });
  </code></pre>
  
  <p>Here i go about creating a div on the go which applies my width and height but the idea is that the parsed settings into the plugin can be anything and i need this to pick up the parsed CSS and apply it.</p>
  
  <p>For example it see's there is a margin or background so it adds margin : settings.margin and background-color : settings.background-color</p>
  
  <p>How do i go about this? As my method is clearly not working. </p>