I'm really glad you enjoyed my article and thank you very much for your questions.
1) The diagrams are for illustration purposes and only a high level overview of what happens. I put scripts below CSS because scripts have to wait for prior CSS to download and compute, they do then act on the CSSOM and DOM.
2) CSS is the rules for the styles, it gets used to create the CSSOM which gets combined with the DOM to form the Render Tree. The phase after that is called Layout, in which the browser takes all the elements and decides what their dimensions are and where to put them.
I hope this answers your questions.