title: How does the browser render HTML and CSS
body: <p>If I have the following HTML div element:</p>
  
  <pre><code>&lt;div id="outer-div" style="Certain-Style"&gt; 
  
  &lt;div id="inner-div"&gt;
  &lt;/div&gt;
  ....
  &lt;/div&gt;
  </code></pre>
  
  <p>Then how the browser will implement/render these HTML elements? Does it start with outer div then inner div then go back to apply the CSS of <code>outer-div</code> then the CSS of <code>inner-div</code>? </p>
  
  <p>Let us imagine that the style <code>Certain-Style</code> rotates the inner div by 90-degree clock-wise. The <code>inner-div</code> is an angularjs directive that displays other items according to the <code>inner-div</code> width. Does the rotation starts first then building the directive or it starts with building the directive then rotates?</p>