Tutorial 4: Creating page layout with css

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).