Understand Webgarden’s HTML Hierarchy to Edit CSS

The basic structure of Webgarden’s HTML elements is consistent across design templates, making it easy for you to edit the CSS.
Basic Structure
The individual names (screen, page, etc.) always correspond to the names of div classes. The highest is <div class="screen"></div>, in it is nested <div class="page"></div>, and so forth. See the chart on the right.
Screen is the highest div in the hierarchy. You can use it to adjust the background or scroll through the nested divs. Page represents the website itself. Here you can define the background style, font size, and other additional attributes of only this part which will subsequently contain content.
Page consists of 3 basic parts - the Top (header), Middle (side columns/panels and website content), and Bottom (footer). The class Static controls both the top and the bottom simultaneously. The Panels represent the side columns/panels, and the Display is the content of our website which is unique to each category.
Learn how to identify the parts of your website according to the hierarchy using the illustrations below.
This hierarchy is only a selection of the most significant parts of the HTML. There are also many other divs. This means that although Screen is a parent of Page, it is not a direct parent of Page. Therefore .screen .page is a valid CSS selector, but .screen > .page is not.
Apply it to CSS Editing
If you would like to change the background color of the footer to black, for example, edit the CSS to appear as below. Don’t forget to change the color of the text as well, so it’s readable against the new background.
background-color: rgb(0,0,0);
color: rgb(255,255,255);
If you want the header and footer to be black, you can adjust both simultaneously using the class Static. Make the CSS read:
background-color: rgb(0,0,0);
color: rgb(255,255,255);
Graphics Illustrating the Hierarchy
Illustrate all the parts screen 2.png
Illustrate all the parts page 2.png
Illustrate all the parts top 2.png
Illustrate all the parts middle 2.png
Illustrate all the parts bottom 2.png
Illustrate all the parts static 2.png
Illustrate all the parts panels 2.png
Illustrate all the parts display 2.png
HTML hierarchy.png
02/12/2016 08:15:56
Or visit this link or this one