1. CSS Layout Cascading Style Sheets

2. Lesson Overview  In this lesson, you will learn:  CSS Box Model  CSS properties for border  CSS properties for padding

3. The CSS Box Model  The box model is used for layout purposes  Any HTML element can be considered a box  A box is made up of four parts:  Margin  Border  Padding  Content  Width / Height

4. Box Model  Margin  Invisible, no background color  Border  Outlines the visible portion of the element  Padding  Defines space between the content area of the box and the border  Content  Content width & height does not include area covered by border and padding

5. Exercise - Boxes  Create a HTML page that contains 4 boxes as shown here  Use for each box  Use for the text inside the box  Save the HTML page as boxes.html  Save the CSS file as boxstyles.html

6. Exercise - Solution

7. Width explanation  If you want to define an area whose total width is 100 pixels, how would you set the widths of the content, border, padding and margin? Margin = 0;Border = 5px; Padding = 10px; Width = ? 100px

8. CSS properties for borders  Syntax: {border: thickness style color}  thickness: px, pt, em or thin, medium, thick  style: none, hidden, dotted, dashed, double, groove, insert, outset, ridge, solid  color: same as color for other elements

9. Border Properties PropertyDescriptionExample Values border-color Color to fill border#EDEDED border-width Width of border on all 4 sides 10px border-style Style of border on all 4 sidesnone, hidden, dotted, dashed, double, groove, insert, outset, ridge, solid border Combined styles for width, style, color in that order 10px solid #FF0000 border-top, border-right, border-bottom, border-left Style for one side of the borders 10px solid #FF0000

10. Border Example  Each side can be styled individually

11. Exercise  Open boxes.html and boxstyles.css  Apply borders to all 4 boxes as shown here  Additional Challenge:  BOX1 has only left border  BOX2 has only right border  BOX3 has only top border  BOX4 has only bottom border

12. Padding Properties PropertyDescriptionExample Values padding Padding for all 4 sides: -One value for all 4 sides -In clock-wise order: T op R ight B ottom L eft 5px 2px 3px 3px 2px padding-top, padding-right, padding-bottom, padding-left Padding for one side of the box 10px

13. Padding Examples

14. Exercise  Open boxes.html and boxstyles.css  Apply paddings to all 4 boxes as shown here  Additional Challenge: Using one line of CSS, set a 10px top and bottom padding and a 5px left and right padding for BOX 1

15. Exercise - Solution For additional challenge: {padding: 10px 5px 10px 5px;}