The analogy I will use correlates to application of make up. Think of HTML as the the structure of a face. Without any make up on, its very bare, you see the main structure of eyes, nose and a mouth. Just as HTML is plain text, its very basic and doesn’t stand out on a webpage.
CSS is the style of make up you want to create, using different colour palettes, shades and techniques you can change the end result of how your face looks. So even though you have the same basic face you can have many different looks depending on how you apply the make up. So even with the same plain HTML text, you can create multiple different looking webpages depending on how you apply CSS styles to change the look of the background, text, layout and content of the HTML text.
The DOM is your face chart, which shows what colours you will use on the face and where, if you will be contouring, baking or highlighting, what brushes you’ll be using and if you’ll be adding additional extras to the structure of the face such as falsies.
Each piece of HTML content that can be seen on a webpage, such as text and images, are enclosed by an (invisible) box. These boxes and sometimes rectangles can be rearranged creatively anywhere on the page as long as they fit within the set parameters and do not overlap. For example, if a page has 12 columns and an image uses 9 columns in a particular row, there are only 3 columns left in that row to add any additional content. If you wanted to add something that takes up more than 3 columns you would have to place that content box in another row on the webpage.
This method of design makes it's simpler for developers to identify, recognise and rearrange content so the webpage remains aesthetically pleasing.
As mentioned above HTML content fits inside these invisible boxes. Well within those boxes, content is also surrounded by padding, border and a margin box (attributes). You can change the properties of these attributes to change how the content is displayed and viewed on the webpage. Some common changes you can make on these attributes include size and colour. By changing the size of the attributes you can create negative space between different contents and this will make help create a more flowing webpage that is east to look through and follow.