Presentation is loading. Please wait.

Presentation is loading. Please wait.

TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.1.

Similar presentations


Presentation on theme: "TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.1."— Presentation transcript:

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 1. For the default style: a) Set the margin space to 0 pixel b) Set the padding space to 0 pixel 2. For the style rule of the header element, add a 500-pixel padding space to the bottom of the element. 3. For list items within the horizontal navigation list, set the upper and lower padding space to 5 pixels. 4. 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. 5. Add the following styles to the main section of the page: a) Set the size of the left margin to 21% b) 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

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


Download ppt "TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.1."

Similar presentations


Ads by Google