1. Tutorial 4: Creating page layout with css
Session 4.1

2. Objectives Setting Margin in the Box Model
Setting Padding in the Box Model
Working with Borders
Creating Rounded Corners
Adding an Outline

3. The CSS Box Model

4. Setting Margin in the Box Model
To set the margin space around an element, use
margin: length;
where length is the size of the margin using one of the CSS units of measure
To set a margin or padding for one side of the box model only, specify the direction (top, bottom, left, or right).
margin-top: length;
margin-bottom: length;
margin-left: length;
margin-right: length;

5. Setting Margin in the Box Model
To set multiple margin spaces, specify the values in a space-separated list starting from the top and moving clockwise around the element. For example, the style
margin: top right bottom left;

6. Setting Padding in the Box Model
To set the padding space inside an element, use
padding: length;
where length is the size of the padding using one of the CSS units of measure
To set padding for one side of the box model only, specify the direction (top, bottom, left, or right).
padding-top: length;
padding-bottom: length;
padding-left: length;
padding-right: length;

7. Setting Padding in the Box Model
To set multiple padding spaces, specify the values in a space-separated list starting from the top and moving clockwise around the element. For example, the style
padding: top right bottom left;

8. Practice - Margin and Padding
For the default style:
Set the margin space to 0 pixel
Set the padding space to 0 pixel
For the style rule of the header element, add a 500-pixel padding space to the bottom of the element.
For list items within the horizontal navigation list, set the upper and lower padding space to 5 pixels.
If the list item of the vertical navigation list belongs to the newgroup class, add a top padding space of 25 pixels to add a bigger gap between that list and the previous list item.
Add the following styles to the main section of the page:
Set the size of the left margin to 21%
Set the size of the top margin to 20 pixels

9. Working with Borders To set the border width, use the property
border-width: width;
where width is the thickness of the border using one of the CSS units of measure.
To set the border color, use
border-color: color;
where color is a color name or value.

10. Working with Borders To set the border design, use
border-style: style;
where style is none, solid, dashed, dotted, double, outset, inset, groove, or ridge

11. Working with Borders
To set all of the border options in one style, use the following:
border: width color style;

12. Creating Rounded Corners
Rounded corners can be applied to any of the four corners of a block element using the styles
border-top-left-radius: radius;
border-top-right-radius: radius;
border-bottom-right-radius: radius;
border-bottom-left-radius: radius;
border-radius: top-left top-right bottom-right bottom-left;

13. Creating Rounded Corners

14. Creating Rounded Corners

15. Practice – Borders and Rounded Corners
For the aside element, create a style to:
Add a 3-pixel solid border with the color value (149, 91, 42) and set the text color to the value (149, 91, 42)
Add a rounded border with a radius of 30 pixels.
For the inline images within the figure box:
Set the margin to 10 pixels
Add rounded corner with a radius of
10 pixels

16. Adding an Outline
To add an outline around an element, use the style property
outline: width color style;
where width, color, and style are the outline width, outline color, and outline style, respectively

17. Adding an Outline

18. Practice - An Outline
For the hover of every hypertext link within the vertical navigation list, add a 2-pixel solid outline with the color value (215, 181, 151).