1 / 21

Creating Page Layouts with CSS

Creating Page Layouts with CSS. Part 2 Margins, Padding, and Borders. Setting Margins and Padding. Margin Styles margin-top: length; margin-right: length; margin-bottom: length; margin-left: length; Or margin: top right bottom left;

solomon-rogers
Download Presentation

Creating Page Layouts 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. Creating Page Layouts with CSS Part 2 Margins, Padding, and Borders

  2. Setting Margins and Padding • Margin Styles • margin-top: length; • margin-right: length; • margin-bottom: length; • margin-left: length; • Or margin: top right bottom left; • Or if you want all the margins to be the same then just margin: length;

  3. Open up cp_reset.css • In the body selector add in: • margin:10px;

  4. Open cp_styles.css

  5. Padding Styles • padding-top: length; • padding-right: length; • padding-bottom: length; • padding-left: length; • padding: top right bottom left; • padding: length;

  6. cp_reset.css • Add to the body • padding: 0px; • cp_styles.css • Add to nav.horizontalNAV li • padding: 15px 0px; • This is like saying padding: 15px 0px 15px 0px;

  7. cp_styles.css • Formatting the headings in the president’s message

  8. cp_styles.css • Setting the paragraph • 40% of the width of the president’s message to the right • Adding a background image

  9. Displaying the vertical list • cp_reset.css • Remove • nav.verticalNAV and all its parts • cp_styles.css

  10. Working with Borders • Setting Border Width and Color • border-top-width: width; • border-right-width: width; • border-bottom-width: width; • border-left-width: width; • border-width: top right bottom left; • border-top-color: color; • border-right-color: color; • border-bottom-color: color; • border-left-color: color; • border-color: top right bottom left;

  11. Setting the border design • border-top-style: style; • border-right-style: style; • border-bottom-style: style; • border-left-style: style; • border-style: top right bottom left; • Styles • Solid, dashed, dotted, double, outset, inset, groove, ridge, none

  12. Add a bottom border to the hypertext links

  13. Creating Rounded Corners • 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;

  14. cp_styles.css • #president • The first two lines you see in this are browser extensions for other browsers. You will also notice you get the green line underneath, that is because not all development kits support things that are in HTML5 you will see difference between IE and other browsers.

  15. Using the outline style • outline-width: value; • outline-color: color; • outline-style: style;

  16. cp_styles.css • To help see they layout structure of the site add this to the style sheet. • Take a look at the page and then go back in and take this out so we don’t forget. • To really see the whole page as we work on it go into the cp_reset.css file and remove all the things that we are temporarily hiding.

  17. cp_styles.css

  18. Formatting the Article heading

  19. Format the paragraph and list item in the article

  20. Format the Figure Box

More Related