Tutorial 5 Working with the Box Model

XP Objectives Understand the box model Create padding, margins, and borders Wrap text around an image Float a block-level element New Perspectives on Blended HTML, XHTML, and CSS2

XP Objectives Use the background properties Create a background image for a list Create an external style sheet Link to an external style sheet New Perspectives on Blended HTML, XHTML, and CSS3

XP Understanding the Box Model The CSS box model describes the boxes that are formed around elements in a Web page – The content area is the area that contains the box content – The box properties are used to add white space and a border around the content – Padding is the white space that surrounds the box content – A border can be placed around the padding – The margin is white space outside the border Creates breathing room New Perspectives on Blended HTML, XHTML, and CSS4

XP Understanding the Box Model New Perspectives on Blended HTML, XHTML, and CSS5

XP Understanding the Padding and Margin Properties Padding properties control the internal white space Setting padding: To set the padding within an element, use: padding: width; where width is the size of the padding using one of the CSS units of measure. New Perspectives on Blended HTML, XHTML, and CSS6

XP Understanding the Padding and Margin Properties The margin properties control the external white space Setting margins: To set the margin space around an element, use: margin: width; where width is the size of the margin usingone of the CSS units of measure. New Perspectives on Blended HTML, XHTML, and CSS7

XP Understanding the Padding and Margin Properties New Perspectives on Blended HTML, XHTML, and CSS8

XP Understanding the Padding and Margin Properties Border properties place a decorative border around the contents of an element New Perspectives on Blended HTML, XHTML, and CSS9

XP Understanding the Padding and Margin Properties Setting the appearance of all four borders at once To set the border width, use: border-width: width; where width is one of the CSS units of measure. To set the border color, use: border-color: value; where value is a named color, RGB color, or hexadecimal color value. To set the border style, use: border-style: style; where style is either none, solid, double, dotted, dashed, outset, inset, groove, or ridge. New Perspectives on Blended HTML, XHTML, and CSS10

XP Understanding the Padding and Margin Properties – To use the border shorthand property, enter: border: style color width; where style is the border style, color is the border color, and width is the border width. New Perspectives on Blended HTML, XHTML, and CSS11

XP Using the Float Property The CSS classification properties allow you to control how to display and position an element, and how to control visibility – Float property – Clear property Using the float property: To float an element, use the style: float: position; where position is left, right, or none. New Perspectives on Blended HTML, XHTML, and CSS12

XP Using the Float Property New Perspectives on Blended HTML, XHTML, and CSS13

XP Using the Clear Property To clear past an element, use the following style: clear: position; where position is left, right, or both. New Perspectives on Blended HTML, XHTML, and CSS14

XP Using the Clear Property New Perspectives on Blended HTML, XHTML, and CSS15

XP Understanding the Background Properties The background properties set the background effects for an element background-image—Place an image behind the contents of an element. The image can be any GIF, PNG, or JPEG image, but the syntax must be in the form url(imagename.gif) background-color—Place a color behind an element’s contents background-position—Position an image within an element. Use keywords or pixel, em, or percentage values. New Perspectives on Blended HTML, XHTML, and CSS16

XP Understanding the Background Properties background-repeat—Repeat an image horizontally or vertically (or both) to fill the contents of an element. background-attachment—Have a background image scroll with the cursor. background—Use this shorthand property to change all of the background properties. Values (if used) must be listed in this order: image value, color value, position value, repeat value, and attachment value. New Perspectives on Blended HTML, XHTML, and CSS17

XP Understanding the Background Properties The background-position property allows multiple values: New Perspectives on Blended HTML, XHTML, and CSS18

XP Understanding the Background Properties The background-repeat property has copies of an image appear behind an element New Perspectives on Blended HTML, XHTML, and CSS19

XP Understanding the Background Properties The background property allows you to specify any or all of the background properties – image, color, position, repeat, and attachment New Perspectives on Blended HTML, XHTML, and CSS20

XP Understanding the Background Properties New Perspectives on Blended HTML, XHTML, and CSS21

XP Resolving Style Conflicts Using different types of style sheets can result in style conflicts Style precedence determines the order of the cascade in Cascading Style Sheets – Five sources for styles User-defined styles Inline styles Embedded style sheet styles External style sheet styles The browser’s style sheet New Perspectives on Blended HTML, XHTML, and CSS22

XP Understanding External Style Sheets Separate file from the Web page Create a new file for the external style sheet, and include a CSS comment at the top of the page to document the author name and the creation date. Do not enter any XHTML code in this file. Switch to the XHTML file. In the embedded style sheet, delete the start and end style tags. In the XHTML file, cut the CSS code from the embedded style sheet and paste the code into the CSS file. New Perspectives on Blended HTML, XHTML, and CSS23

XP Understanding External Style Sheets Save the CSS file with a.css filename extension and close it. In the section of the XHTML file, enter the following code to link to the external CSS file: where filename.css is the name of the external style sheet file. New Perspectives on Blended HTML, XHTML, and CSS24

XP Understanding External Style Sheets New Perspectives on Blended HTML, XHTML, and CSS25

XP Understanding External Style Sheets New Perspectives on Blended HTML, XHTML, and CSS26

XP Understanding External Style Sheets To create a link to a CSS file, enter the following code between the tags in an XHTML document: where the rel attribute and its value specify the link to a style sheet file, the href attribute and its value identify the CSS file that is the source of the style code, and the type attribute and its value identify a text file. New Perspectives on Blended HTML, XHTML, and CSS27

XP Understanding External Style Sheets New Perspectives on Blended HTML, XHTML, and CSS28