The first thing to start with when developing your website is creating your HTML, and then follow with your CSS, because the HTML is the markup of your site while CSS is the style to it. HTML is sematic, meaning it gives your content meaning to the user agents. CSS is used to style your sites tags based on names, IDs, and classes that have a relationship to your HTML markup.
A document flow defines the way that HTML elements "flow" down the page of your site and how they appear in the markup. The purpose of having a document flow is to ensure that your site has a display that is usable if marked up correctly with HTML. Almost, if not all, HTML elements have a display, block or inline, and display properties that make your site inviting and intuative in design.
Before structing your CSS you need to understand that the structure of your HTML creates the document/planning objective that you are pushing to achieve (also reffered to as the DOM). The DOM is the brower's view and interpretation of the document's properties. When you reference specific elements in your CSS, the location of that CSS will model in DOM (then you can elect an HTML element and then modify those specific style properties).
