Summary 4

Topic 1: What The Box Model is all About.

Every element that is created in HTML is basically put in a box on the page you've created. This box, by default is transparent which means it cannot be seen unless you add some CSS codes to it. There are properties to add that fall into three groups: border, padding and margin. Border allows you to set the thickness, style and color of the border of the box. You can set the width of the border, the syle,  meaning you can keep the border hidden or make it a solid line or dashed line, and you can change the color. Padding is where you can set the distance of a box's content from its border. Margins are where you can set the distance between this box and adjacent elements.       

Topic 2: What Floating and Clearing Do.  

A great way a user can organize their page's layout is involving the clear and float properties. The clear property allows the user to stop such elements from moving up next to a floated element. For example, if you have two paragraphs and want only one of them to be next to a floated element, you can clear the second one so that it would be postitioned under the first one. The float property is used to flow text around images. But, it is also an easy way to create multi-column layouts.

Topic 3: All About Backgrounds.

Backgrounds are a positioning element that allow users to add color and images into an element's background. Background color is the most simple way of adding a background to an element as all it does is fill in said element with the users color of choice. Background image adds an image to the background of the desired element. This is usually done with background-image: url(); where the url part takes an image from a users computer. Background-repeat is used for when the user want a repeating image in the background or it can also be used for keeping an image from reating by using background-repeat: no-repeat;. Background position lets the user specify where they want the position of their image to be. There positions can be top, left, bottom, right and center and two can be used at the same time to give a more specific location. Background size is self explanitory as it is just letting the used control the size of the background image. Background attachment determins if a background image ,within an element that is scrolling, will move when an element is scrolled. The default for this is scroll but can also be changed to fixed so it doesn't move.