tutorial 4 creating page layout with css n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Tutorial 4: Creating page layout with css PowerPoint Presentation
Download Presentation
Tutorial 4: Creating page layout with css

Loading in 2 Seconds...

play fullscreen
1 / 18
alvin-hess

Tutorial 4: Creating page layout with css - PowerPoint PPT Presentation

145 Views
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. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

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