How does the browser render HTML and CSS
<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>