WDV101 Intro to Website Development

1. WDV101 Intro to Website Development Tutorial #5 Working with the Box Model

2. Tutorial #4 Review - CSS • Create a homework page • Final Project Discussion • Exam on Blackboard • Styling Lists (List-style-type, list-style-image, list-style-position) • Group Selectors, Descendant Selectors, Inheritence • Nav Element, Span Element • Classes (Dependent and Independent) • Pseudo-Class Selectors for Links • Margins

3. Working with the Box Model • Box Model – describes the imaginary boxes that are formed around elements • In HTML every element is treated as a box • Box is 4 parts • Content – Image, Text, Etc. There is no white space • Padding – White space that surrounds the box content • Border – Visible solid or decorated line around padding • Margin – White space outside of the border.

4. Working with the Box Model • http://www.w3schools.com/css/css_boxmodel.asp

5. Padding and Margin • Can be adjusted with em, px, %, or other measurements • Set in CSS as the following for the same amount for each side: padding: width; • Can set an individual side • Padding-top • Padding-right • Padding-bottom • Padding-left

6. Padding and Margin • Can be adjusted with em, px, %, or other measurements • Set in CSS as the following for the same amount for each side: margin: width; • Can set an individual side • Margin-top • Margin-right • Margin-bottom • Margin-left

7. Padding and Margin - Shorthand • One value – All four sides Equally • Two Values – First value is Top and Bottom, second for left and right • Three Values – Top, Left + Right, Bottom • Four Values – Clockwise Top, Right, Bottom, Left Padding: 4px; Margin: 10px 4px; Padding: 4px 10px 4px; Margin: 0 0 0 4px;

8. Border Properties • Border – Decoration around Content and Padding • Can change color, style, and width • May look different on the different browsers • Can set border-style for all 4 styles or one side border: dotted thin red; /*sets border style, width and color all in one*/ Border-top-style Border-right-style (plus bottom and left)

9. Border Properties • Border Styles – Page 247 shows examples • Solid • Double • Dotted • Dashed • Groove • Ridge • Inset • Outset • None

10. Border Width Property • Border width can be set in • Thick • Thin • Medium • Pixels, em, or % • Recommended to use Pixels due to different browser rendering Border-width: 3px; /*sets all four sides*/ • Border-top-width, Border-right-width, Border-bottom-width, border-left-width

11. Border Color • Can set as Hex, RGB, or named color • Like style and width can set all 4 or a specific side Border-color: red; Border-top-color: # 8C6B71;

12. Border Shorthand • Border-color, border-style, border-width settings for all four sides • Border-top, border-right, border-bottom, border-left • Sets style, width, and color for the side specified. • Just use Border to set all for sides with color, width, and style Border: solid thin red;

13. Float and Clear • Float is used to position boxes on the page • Can float left or right • Floated elements are moved to the edge of the containing element (which could be the browser window) • If multiple elements are floated and will not fit the browser will stack it right below the last floated element Float: right;

14. Float and Clear • Clear is used to specify whether or not an element can have another floating element beside it • Specifically the clear property specifies the sides where floating elements are not allowed • Tells the browsers to “Clear” the previous float • Options: Right, Left, Both, None Clear: both;

15. Float and Clear • Can setup independent class for each float and clear .right{ float: right; } .left { float: left; } .clear { clear: both; }

16. Lab • Get Tutorial5_start.html from Class_info/lab • Add a dotted medium red border for h3 • Add 10 pixel padding for h3 • Make the image float to the left • Add a 10 pixel padding to the right of the image • Add a double thick black border to the image

17. Background Properties • Background-image – Places an image behind the contents of an element • Background-color – Places a color behind the contents of an element • Background-position – Positions an image within an element. Set in pixel, em, or percent • Background-repeat – Repeats and image to fill the contents of an element • Background-attachment – Sets a background image to scroll with the cursor, or fixes the background with only elements on top of the background scrolling

18. Background Properties • Shorthand: Background: image color position repeat attach

19. Background Properties • Background-position – allows you to position a background image in different locations within its container element • Keywords or % pairs (horizontal vertical)

20. Background-repeat • Use background-repeat to display copies of the image appear on the background

21. Background Attachment • Allows you to set the behavior of the background image with respect to scrolling • Defaults to image scrolling with the rest of the page • Two values • Scroll – Default • Fixed

22. Lab • Get the smile.png from the class_info/labs/images • Add a background Image to the footer element. The footer CSS section already exists. • Set the url to images/smile.png • Set the position to 100% 100% • Set the repeat to only the y axis

23. CSS Precedence • If there are conflicts in the CSS due to multiple styles there is a precedence to determine what is displayed • The order of precedence from highest to lowest: • User-defined style – set by the user in web browsers • Inline styles • Embedded style sheets • External style sheets • Brower defaults

24. Pathnames Project • Zip available on blackboard • Also available on http://www.dmaccwebdev.org/CIS204%20Summer%202013/CLASS_INFO/labs/