Tutorial 4: Creating page layout with css Session 4.1

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

The CSS Box Model

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;

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;

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;

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;

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

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.

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

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

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;

Creating Rounded Corners

Creating Rounded Corners

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

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

Adding an Outline

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