title: How to CSS style AngularJS directive?
body: <p>Assuming I have a directive "mydirect" with a template that contains a lot of divs with a lot of nested classes. For example:</p>
  
  <pre><code>&lt;div class="mydirect"&gt;
    &lt;div class="classA"&gt;
      &lt;div class="subclassA"&gt;
        &lt;div class="subclassB"&gt;
        &lt;/div&gt;
      &lt;div class="classB"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I noticed that despite having the classnames in a css file ("mydirectstyle.css") and it being included in index.html, using my directive:</p>
  
  <pre><code>angular.module("MyApp", []).
    directive('mydirect', function() {
      return {
        restrict: 'E',
        replace: true,
        template: '-All that Html here-'
      };
    });
  </code></pre>
  
  <p>None of the CSS properties are applied to it whatsoever. What is the best way to apply all my styles to those multiple classes? Can it be done such that I don't have to manually select each element and set individual CSS properties?</p>
  
  <p>My index.html page contains a <code>&lt;mydirect&gt; &lt;/mydirect&gt;</code> that gets replaced by the directive template shown above.</p>