Summary 4

“Chapter 3 - Styln’ With CSS”

Topic 1 - Box Border

The border of a box model can be changed using the ‘width’, ‘style’, and ‘color’ properties which all have values associated with them that can be adjusted accordingly. The default properties of a box model are as follows; border-width: medium, border-style: none, and border-color: black. By default the box border will not appear, but giving a box a thin border of 1px can be helpful when designing to keep track of where certain elements are.

Topic 2 - The Float Property

One of the main uses of the float property is to create multi-column layouts easily, but it is more commonly used is to flow text around images. You do not need to set the width of an image when floating it because images have an inherent width, the same does not go for a floated element which does require the width to be set to avoid unexpected issues. If an image and a paragraph of text were both floated, that is how the multi-column layout can occur, otherwise the floated image would just have the un-floated text wrap around.

Topic 3 - Backgrounds

Each element box has two ‘layers’; the foreground has all of the content such as the text, image, or border, and the background can be a solid color or contain an image. The ‘background-image’ is actually placed on top of the ‘background-color’ and there can be multiple images layered on the background of an element. The image can change size, change position, and be repeated using the various CSS background properties.