Upload
alyson-freeman
View
222
Download
0
Embed Size (px)
Citation preview
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
New Perspectives on Blended HTML, XHTML, and CSS 3
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
New Perspectives on Blended HTML, XHTML, and CSS 4
XPXPUnderstanding the Box Model
New Perspectives on Blended HTML, XHTML, and CSS 5
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.
New Perspectives on Blended HTML, XHTML, and CSS 6
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.
New Perspectives on Blended HTML, XHTML, and CSS 7
XPXPUnderstanding the Padding and Margin Properties
New Perspectives on Blended HTML, XHTML, and CSS 8
XPXPUnderstanding the Padding and Margin Properties• Border properties place a decorative border around the
contents of an element
New Perspectives on Blended HTML, XHTML, and CSS 9
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.
New Perspectives on Blended HTML, XHTML, and CSS 10
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.
New Perspectives on Blended HTML, XHTML, and CSS 11
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.
New Perspectives on Blended HTML, XHTML, and CSS 12
XPXPUsing the Float Property
New Perspectives on Blended HTML, XHTML, and CSS 13
XPXPUsing 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 CSS 14
XPXPUsing the Clear Property
New Perspectives on Blended HTML, XHTML, and CSS 15
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.
New Perspectives on Blended HTML, XHTML, and CSS 16
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.
New Perspectives on Blended HTML, XHTML, and CSS 17
XPXPUnderstanding the Background Properties• The background-position property allows multiple
values:
New Perspectives on Blended HTML, XHTML, and CSS 18
XPXPUnderstanding the Background Properties• The background-repeat property has copies of an image
appear behind an element
New Perspectives on Blended HTML, XHTML, and CSS 19
XPXPUnderstanding 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 CSS 20
XPXPUnderstanding the Background Properties
New Perspectives on Blended HTML, XHTML, and CSS 21
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
New Perspectives on Blended HTML, XHTML, and CSS 22
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.
New Perspectives on Blended HTML, XHTML, and CSS 23
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.
New Perspectives on Blended HTML, XHTML, and CSS 24
XPXPUnderstanding External Style Sheets
New Perspectives on Blended HTML, XHTML, and CSS 25
XPXPUnderstanding External Style Sheets
New Perspectives on Blended HTML, XHTML, and CSS 26
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.
New Perspectives on Blended HTML, XHTML, and CSS 27
XPXPUnderstanding External Style Sheets
New Perspectives on Blended HTML, XHTML, and CSS 28