Cascading Style Sheets CSS Layout Cascading Style Sheets

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

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

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

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

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

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;

Centering Example

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

Exercise - Solution