Tutorial #5 Working with the Box Model

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

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.

Working with the Box Model

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

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

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: px;

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-style: dotted thin red; /*sets border style, width and color all in one*/ Border-top-style Border-right-style (plus bottom and left)

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

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

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;

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;

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;

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;

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

Lab 1. Get Tutorial5_start.html from Class_info/lab 2. Add a dotted medium red border for h3 3. Add 10 pixel padding for h3 4. Make the image float to the left 5. Add a 10 pixel padding to the right of the image 6. Add a double thick black border to the image

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

Background Properties Shorthand: Background: image color position repeat attach

Background Properties Background-position – allows you to position a background image in different locations within its container element Keywords or % pairs (horizontal vertical) Top Left (0%,0%)Top Center (50% 0%)Top Right (100% 0%) Center Left (0% 50%)Center Center (50% 50%)Center Right (100% 50%) Bottom Left(0% 100%)Bottom Center (50% 100%)Bottom Right (100% 100%)

Background-repeat Use background-repeat to display copies of the image appear on the background PropertyEffect Repeat (default)The image is repeated (tiled) to the right and down to fill the elements contents. Repeat-xThe image is repeated only horizontally Repeat-yThe image is repeated only vertically No-repeatThe image is displayed once and not repeated

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

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

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: 1. User-defined style – set by the user in web browsers 2. Inline styles 3. Embedded style sheets 4. External style sheets 5. Brower defaults

Pathnames Project Zip available on blackboard Also available on /CLASS_INFO/labs/ /CLASS_INFO/labs/