html - looking for a good explanation on how html gets rendered and how css effects it

Question

I am looking for a tutorial that explains how css/html gets rendered. I must be using the incorrect search terms. All i can find is tutorials like : This is a div....

I use CSS alot but would like a better understanding of how the page gets rendered. Understanding the flow so why i put things in certain order and how they are styled the behave differently.

for example: if i style

       .etype{
            width: 17px;
            height: 11px;
            display: inline-block;
            float: right;
            margin-top:5px;
        }

i have to put the etype divs first for them to display after href

<li class="avail-items">
    <div class="etype edit-page"></div>
    <div class="etype view-page"></div>
    <span class="ptype"></span> 
    <a class="pages-manage" href="#"><?=$item->label?></a>
 </li>

Thanks

Answer 1

I personally like this explanation as it's very thorough:

http://taligarsiel.com/Projects/howbrowserswork1.htm