CSS LayoutCascadingStyle Sheets

Lesson OverviewIn this lesson, you will learn:

CSS properties for margin CSS properties for dimensions (width,

height, centering)

Margin PropertiesProperty 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