1. CSS Layout Cascading Style Sheets

2. Lesson Overview  In this lesson, you will learn:  CSS properties for margin  CSS properties for dimensions (width, height, centering)

3. Margin Properties PropertyDescriptionExample Values margin Margin for all 4 sides: -One value for all 4 sides -In clock-wise order: T op R ight B ottom L eft 5px 2px 3px 3px 2px margin-top, margin-right, margin-bottom, margin-left Margin for one side of the box 10px

4. Margin Examples  Notice that margins are always transparent (they don’t contain the elements background color, etc.)

5. Exercise  Open boxes.html and boxstyles.css  Apply margins to the boxes so there are empty spaces between them

6. CSS properties for dimensions  width / height  How wide or tall to make the element  Block elements only  px or %

7. Centering a block element  Use auto margins  Works best if width is set  To center inline elements within a block element, use text-align: center;

8. Centering Example

9. Exercise  Open boxes.html and boxstyles.css  Center BOX1  Center the text within BOX2, BOX3 and BOX4

10. Exercise - Solution