Topic 1 – Understanding the Box Model
An HTML page is comprised of multiple boxes. These boxes are created when elements are added to the markup. There are three main properties within each element-border, padding, and margin. The thickness, style, and color of the border can vary for each box. Padding refers to the distance between the content within the box and the border. Margin is the distance between the box border and other elements outside the box.
Topic 2 – The Position Property
The position property refers to the positioning of the box in the document compared to where it is usually located in the document. The four position properties are static, relative, absolute, and fixed. Static positioning consists of elements that are stacked down the page. Relative positioning is paired with its default position and can be guided in multiple directions-top, bottom, left, and right. Absolute and fixed positioning are similar because they completely remove elements from the document flow.
Topic 3 – Backgrounds
Colors and images can be added to an elements background. Each element has two layers, similar to the layer options in Photoshop. The first layer (foreground) consists of the image or text and the border. The second layer (background) contains more images or is filled with a solid color. The background-color property allows for solid colors to be added to the background. Images can be added using the background-image property.