title: Defining custom css styles for html tags
body: <p>I don't do CSS and I'm not even sure what this is called so excuse the ignorance :-)</p>
  
  <pre><code>.examples {
   }
  
  .examples b {
    font-weight: bold;
  }
  
  .examples p {
    margin-top: 0.9em;
    margin-bottom: 0.9em;
  }
  </code></pre>
  
  <p>I'm assuming the above means any <code>b</code> or <code>p</code> tags inside a <code>&lt;div class='examples'&gt;</code> will use the styling from <code>.examples</code> and anything custom defined for <code>b</code> or <code>p</code>?</p>
  
  <p>Can I create my own style using that convention, like this?</p>
  
  <pre><code>.examples mystyle {
  }
  
  &lt;div class='examples'&gt;
     &lt;div class='mystyle'&gt;
     ...
  </code></pre>
  
  <h2>UPDATE:</h2>
  
  <p>I want <code>mystyle</code> to use <code>examples</code> styling, but override with a black bottom border. Using <code>.examples .mystyle</code> the bottom border appears outside <code>examples</code> div, but with <code>.examples mystyle</code> the enclosing div looks good, but the bottom black border is gone. My apologies, so it's not working either way.   </p>
  
  <p><a href="http://jsfiddle.net/SAFX/5ft9W/" rel="nofollow">http://jsfiddle.net/SAFX/5ft9W/</a></p>