Tutorial 5 Working with the Box Model. XP Objectives Understand the box model Create padding,...

Tutorial 5

Working with the Box Model

XPXPObjectives• 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 CSS 2

XPXPObjectives• Use the background properties• Create a background image for a list• Create an external style sheet• Link to an external style sheet


XPXPUnderstanding 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


XPXPUnderstanding the Box Model


XPXPUnderstanding 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.


XPXPUnderstanding 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 using one of the CSS units of measure.


XPXPUnderstanding the Padding and Margin Properties


XPXPUnderstanding the Padding and Margin Properties• Border properties place a decorative border around the

contents of an element


XPXPUnderstanding 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.


XPXPUnderstanding 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.


XPXPUsing 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.


XPXPUsing the Float Property


XPXPUsing the Clear Property• To clear past an element, use the following style:

clear: position;

where position is left, right, or both.


XPXPUsing the Clear Property


XPXPUnderstanding 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.


XPXPUnderstanding 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.


XPXPUnderstanding the Background Properties• The background-position property allows multiple

values:


XPXPUnderstanding the Background Properties• The background-repeat property has copies of an image

appear behind an element


XPXPUnderstanding the Background Properties• The background property allows you to specify any or all

of the background properties– image, color, position, repeat, and attachment


XPXPUnderstanding the Background Properties


XPXPResolving 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


XPXPUnderstanding 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.


XPXPUnderstanding External Style Sheets• Save the CSS file with a .css filename extension and

close it.• In the <head> section of the XHTML file, enter the

following code to link to the external CSS file:<link rel="stylesheet"

href="filename.css" type="text/css" />

where filename.css is the name of the external style sheet file.


XPXPUnderstanding External Style Sheets


XPXPUnderstanding External Style Sheets• To create a link to a CSS file, enter the following code

between the <head> </head> tags in an XHTML document:

<link rel="stylesheet" href="document.css" type="text/css">

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.


Tutorial 5 Working with the Box Model. XP Objectives Understand the box model Create padding,...

Documents

Transcript of Tutorial 5 Working with the Box Model. XP Objectives Understand the box model Create padding,...