Topic 1 – Box Model

CSS follows a ‘box model’, meaning every element created in your markup produces a box on the page. In other words, an HTML page is just an arrangement of boxes. By default, boxes are transparent and not visible; however, you can add properties such as border, padding, and margin to change the appearance of a box. The border property allows you to change the width, style, and color, while padding and margin are properties which push inward and outward from the border, respectively. The size of a box can be ‘unwidthed’ (width not set) or ‘widthed’ (width set). Adding horizontal borders, padding, and margins to an unwidthed box causes the content to be reduced in width by the total width of these properties. Comparatively, a box with a specified width expands to claim more horizontal space as borders, padding, and margins are added and the width property only sets the width of the box’s content.

Topic 2 - Properties to Adjust Box Arrangement

There are multiple additional properties that can be used to change the layout of boxes on a page, including float, clear, position, and display. Float is a way to move an element out of the normal flow of the document, and can be used to flow text around images and create columns and make block-level elements sit side-by-side. To stop floated elements from moving up next to one another, you can apply the clear property. The position property determines where an element box is positioned in respect to where it would normally appear in the document flow. Values for the position property include: static (elements stack under one another down the page), relative (can be moved with respect to its default position by using top, right, bottom, and left properties), absolute (takes an element out of the flow of the document), and fixed (the element’s positioning context is the viewport so the element doesn’t move when the page is scrolled). Finally, display properties of block or inline elements can be used to adjust the layout of boxes.

Topic 3 – Background Properties

To add interest to your page, you should apply background properties. Background properties provide a means to add color, images, and/or gradients into an element’s background. Background properties include: color, image, repeat (repeat, repeat-x, repeat-y, or no-repeat), position (top, right, bottom, left, or center), size (scale, size, cover, or contain), and attachment (scroll or fixed).