1 / 18

Tutorial 4: Creating page layout with css

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.

alvin-hess
Download Presentation

Tutorial 4: Creating page layout with css

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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

More Related