roughly what happens

1. The browser loads the HTML (e.g. receives it from the network).
2. It converts the HTML into a DOM (Document Object Model). The DOM represents the document in the computer's memory.
3. The browser then fetches most of the resources that are linked to by the HTML document, such as embedded images and videos ... and linked CSS! JavaScript is handled a bit later on in the process.
4. The browser parses CSS, and sorts the different rules by their selector types into different "buckets", e.g. element, class, ID, and so on. Based on the selectors it finds, it works out which rules should be applied to which nodes in the DOM, and attaches style to them as required ，this intermediate step is called a render tree.
5. The render tree is laid out in the structure it should appear in after the rules have been applied to it.
6. The visual display of the page is shown on the screen，this stage is called painting.
   
   

About the DOM

a tree-like structure
Each element, attribute, and piece of text in the markup language becomes a DOM node in the tree structure

if a browser encounters CSS it doesn't understand

browser does nothing, and just moves on to the next bit of CSS
when you want to use a value that is quite new and not supported everywhere, try to add two rules, the former is older, the latter is newer.