A html page is effectively made of nested boxes, which is the reason why it can be a good idea to start with pen and paper when designing one.
This is referred to as the Document Object Model (DOM).
The DOM is an API that describes the structure of the page in a parent-children form to the browser. This creates a tree-like structure where a parent element can have several children elemtents, each of a different type. For example a div element can have a heading and a paragraph as its children. The browser then combines this information with the CSS code to render the page.
CSS is used to format the way the HTML page is displayed. It stands for Cascading Style Sheets.
The main idea in programming is: "do not repeat yourself."
It can be used by using the "style" tag, linking to an additional file using the "link" tag or writing it inline.
What is being cascaded is the style. It can be passed to various types of classes.
It follows the structure: class{Attribute: value;}
The attribute reference guide can be found here.
Everything on a webpage is made of boxes. However, these boxes comprise of four elements:
These boxes can have several types of attibutes such as their maximum width, which can be set as an absolute number of pixels or as a percentage of the screen.
Not repeating yourself is one of the main ideas in programming. It involves more planning upfront but there are several advantages to doing so:
To make sure that your code appears correctly on all browsers, it is a good idea to check it for errors using online code-checkers:
Html code checker
CSS code checker