Tutorial 5
Working with
the Box Model
Objectives
•
•
•
•
XP
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
Objectives
•
•
•
•
XP
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
Understanding the Box Model
XP
• 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
Understanding the Box Model
New Perspectives on Blended HTML, XHTML, and CSS
XP
5
Understanding the Padding
and Margin Properties
XP
• 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
Understanding the Padding
and Margin Properties
XP
• 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
Understanding the Padding
and Margin Properties
New Perspectives on Blended HTML, XHTML, and CSS
XP
8
Understanding the Padding
and Margin Properties
XP
• Border properties place a decorative border around the
contents of an element
New Perspectives on Blended HTML, XHTML, and CSS
9
Understanding the Padding
and Margin Properties
XP
• 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
Understanding the Padding
and Margin Properties
XP
– 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
Using the Float Property
XP
• 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
Using the Float Property
New Perspectives on Blended HTML, XHTML, and CSS
XP
13
Using the Clear Property
XP
• 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
Using the Clear Property
New Perspectives on Blended HTML, XHTML, and CSS
XP
15
Understanding the Background
Properties
XP
• 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
Understanding the Background
Properties
XP
• 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
Understanding the Background
Properties
XP
• The background-position property allows multiple
values:
New Perspectives on Blended HTML, XHTML, and CSS
18
Understanding the Background
Properties
XP
• The background-repeat property has copies of an image
appear behind an element
New Perspectives on Blended HTML, XHTML, and CSS
19
Understanding the Background
Properties
XP
• 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
Understanding the Background
Properties
New Perspectives on Blended HTML, XHTML, and CSS
XP
21
Resolving Style Conflicts
XP
• 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
Understanding External Style
Sheets
XP
• 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
Understanding External Style
Sheets
XP
• 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
Understanding External Style
Sheets
New Perspectives on Blended HTML, XHTML, and CSS
XP
25
Understanding External Style
Sheets
New Perspectives on Blended HTML, XHTML, and CSS
XP
26
Understanding External Style
Sheets
XP
• 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
Understanding External Style
Sheets
New Perspectives on Blended HTML, XHTML, and CSS
XP
28