1. Cascading Style Sheets
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)
Ask one kid to sketch what other kids describe (magazine page that sketcher can’t see)
Look at result—shortcomings?
Sketch is probably not super-accurate
Need a very specific, accurate page description language—HTML

3. Margin Properties Property Description Example Values margin
Margin for all 4 sides:
One value for all 4 sides
In clock-wise order: Top Right Bottom Left
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