Chapter 5 How to use the CSS box model for spacing, borders, and backgrounds HTML, XHTML, and CSS, C5 © 2010, Mike Murach & Associates, Inc. Slide.
Download ReportTranscript Chapter 5 How to use the CSS box model for spacing, borders, and backgrounds HTML, XHTML, and CSS, C5 © 2010, Mike Murach & Associates, Inc. Slide.
Chapter 5
How to use
the CSS box model
for spacing, borders,
and backgrounds
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 1
Objectives
Applied
1. Given an HTML document, create CSS rule sets that use the CSS box
model to apply spacing, borders, and backgrounds to the web page.
Knowledge
2. Describe the use of the CSS box model.
3. Explain how the CSS box model can be used to control the spacing
between the headings and paragraphs on a page.
4. Describe the effect of “collapsing margins”.
5. Describe these properties for a block element in a box model: height,
width, margin, padding, border, background color, and background
image.
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 2
The CSS box model
margin-right
border-right
padding-right
margin-top
border-top
padding-top
height
This is the content area for the block element. It is
the basis for the width and height properties.
padding-bottom
border-bottom
margin-bottom
padding-left
border-left
margin-left
HTML, XHTML, and CSS, C5
width
© 2010, Mike Murach & Associates, Inc.
Slide 3
The formula for calculating the height of a box
top margin + top border + top padding +
height +
bottom padding + bottom border + bottom margin
The formula for calculating the width of a box
left margin + left border + left padding +
width +
right padding + right border + right margin
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 4
The HTML for a page that uses the box model
<body>
<div id="main">
<h1>San Joaquin Valley Town Hall</h1>
<p>Welcome to San Joaquin Valley Town Hall.
We have some amazing speakers in store
for you this season!</p>
</div>
</body>
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 5
The CSS for the page
body {
border: 3px dotted black;
margin: 10px; }
#main {
border: 2px solid black;
width:
500px;
margin: 20px;
/* all four sides */
padding: 10px;
/* all four sides */ }
h1, p {
border: 1px dashed black;
padding: 10px; }
h1 {
margin: .5em 0 .25em;
padding-left: 15px; }
p {
margin: 0;
/* all four sides */
padding-left: 15px; }
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 6
The web page in a browser
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 7
Properties for setting heights and widths
width
height
min-width
max-width
min-height
max-height
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 8
How to set the width of the content area
width: 450px;
width: 75%;
width: auto;
/* an absolute width */
/* a relative width */
/* width based on content */
How to set the height of the content area
height: 125px;
height: 50%;
height: auto;
How to set the minimums and maximums
min-width: 450px;
max-width: 600px;
min-height: 120px;
max-height: 160px;
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 9
Properties for setting margins
margin-top
margin-right
margin-bottom
margin-left
margin
Mnemonic device
trouble
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 10
How to set the margin on a single side of an element
margin-top: .5em;
margin-right: 1em;
margin-bottom: 2em;
margin-left: 1em;
How to set the margins on multiple sides
margin:
margin:
margin:
margin:
1em;
/* all four sides */
0 1em;
.5em 1em 2em;
.5em 1em 2em 1em;
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 11
Terms
box model
containing block
collapsed margins
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 12
Properties for setting padding
padding-top
padding-right
padding-bottom
padding-left
padding
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 13
How to set the padding on a single side
padding-top: 0;
padding-right: 1em;
padding-bottom: .5em;
padding-left: 1em;
How to set the padding on multiple sides
padding:
padding:
padding:
padding:
1em;
0 1em;
0 1em .5em;
0 1em .5em 1em;
HTML, XHTML, and CSS, C5
/* all four sides */
© 2010, Mike Murach & Associates, Inc.
Slide 14
A web page that uses the box model
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 15
The HTML for the web page
<body>
<div id="page">
<div id="header">
<h1><img src="images/logo.jpg"
alt="Town Hall Logo" width="50px" />
San Joaquin Valley Town Hall</h1>
<h3>Bringing cutting-edge speakers to the valley</h3>
</div>
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 16
The HTML for the web page (continued)
<div id="main">
<h2>2009-2010 guest speakers</h2>
<ul class="speakers">
<li>October 14, 2009:
<a href="speakers/russell.html">
Dr. Alan J. Russell</a></li>
.
.
<li>April 21, 2010: <a href="speakers/coll.html">
Steve Coll</a></li>
</ul>
<p><em>Contact us by phone</em> at (559) 555-1212 for
ticket information.</p>
</div>
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 17
The HTML for the web page (continued)
<div id="footer">
<p>© Copyright 2010 San Joaquin Valley
Town Hall.</p>
</div>
</div>
</body>
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 18
The CSS for the web page
/* the styles for body element */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 84%;
margin: 0;
padding: 0; }
/* the styles for the page division */
#page {
width: 500px;
margin: 0 auto; }
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 19
The CSS for the web page (continued)
/* the styles used in the header division */
img {
margin-right: .25em; }
h1, h3 {
color: #ef9c00;
margin-bottom: 0; }
h1 {
font-size: 180%;
margin-top: .7em; }
h3 {
font-size: 120%;
font-style: italic;
margin-top: 1em; }
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 20
The CSS for the web page (continued)
/* the styles used in the main division */
h2 {
font-size: 130%;
margin-top: 1.5em;
margin-bottom: 0; }
.speakers {
line-height: 1.5;
margin-top: .5em; }
a { font-weight: bold; }
a:link { color: #ef9c00; }
a:visited { color: #facd8a; }
a:active { color: green; }
#main p { margin-bottom: 0; }
em { font-weight: bold; }
/* the styles for the footer division */
#footer p {
font-size: 80%;
text-align: right;
margin-top: 2.5em; }
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 21
Another version of the CSS
/* the styles for the body element */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 84%;
margin: 0;
padding: 0; }
/* the styles for the page division */
#page {
width: 500px;
margin: 0 auto; }
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 22
Another version of the CSS (continued)
/* the styles used in the header division */
img {
margin-right: .25em; }
h1, h3 {
color: #ef9c00;
margin-bottom: 0; }
h1 {
font-size: 180%;
margin-top: .7em; }
h3 {
font-size: 120%;
font-style: italic;
margin-top: 0;
padding-top: 1em; }
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 23
Another version of the CSS (continued)
/* the styles used in the main division */
h2 {
font-size: 130%;
margin: 0;
padding-top: 1.5em; }
.speakers {
line-height: 1.5;
margin: 0;
padding-top: .5em; }
a { font-weight: bold; }
a:link { color: #ef9c00; }
a:visited { color: #facd8a; }
a:active { color: green; }
#main p { margin-bottom: 0; }
em { font-weight: bold; }
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 24
Another version of the CSS (continued)
/* the styles for the footer division */
#footer p {
font-size: 80%;
text-align: right;
margin: 0;
padding-top: 2.5em; }
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 25
Properties for setting borders
border-width
border-style
border-color
border
border-side-width
border-side-style
border-side-color
border-side
The syntax for the shorthand border properties
border: [width] [style] [color];
border-side: [width] [style] [color];
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 26
How to set border properties
border: thin solid green;
border: 2px dashed #808080;
border: 1px inset;
/* uses the element's color property */
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 27
How to set the widths of borders
border-width:
border-width:
border-width:
border-width:
1px;
/* all four sides */
1px 2px;
1px 2px 2px;
1px 2px 2px 3px;
How to set the style of borders
border-style: dashed;
/* dashed line all sides */
border-style: solid;
/* solid line all sides */
border-style: solid none;
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 28
How to set the color of borders
border-color: green;
/* a named color */
border-color: #808080;
/* a hexadecimal value */
border-color: black gray;
How to set individual borders
border-top: 2px solid black;
border-right-style: dashed;
border-bottom-width: 4px;
border-left-color: gray;
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 29
The properties for background color and image
background-color
background-image
background-repeat
background-position
background-attachment
background
The shorthand background property
background: [color] [image] [repeat] [attachment]
[position];
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 30
How to set multiple background properties
background: blue;
background: blue url("images/texture.gif");
background: #808080 url("images/header.jpg") repeat-y scroll
center top;
How to set the background color and image
background-color: blue;
background-image: url("images/texture.gif");
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 31
How to control image repetition, position, and
scrolling
background-repeat:
background-repeat:
background-repeat:
background-repeat:
repeat;
repeat-x;
repeat-y;
no-repeat;
background-position: left top;
background-position: center top;
background-position: 90% 90%;
background-attachment: scroll;
background-attachment: fixed;
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 32
Web page that uses borders & background color
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 33
The CSS for the web page
/* the styles for the body element */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 84%;
margin: 0;
padding: 0;
background-color: #facd8a; }
/* the styles for the page division */
#page {
width: 500px;
margin: 0 auto;
background-color: white;
padding: 10px;
border: 1px solid black; }
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 34
The CSS for the web page (continued)
/* the styles used in the header division */
#header { margin-top: 0;
padding-bottom: 1em;
border-bottom: 2px solid #ef9c00; }
img { padding-right: .25em; }
h1, h3 {
color: #ef9c00;
margin-bottom: 0; }
h1 {
font-size: 180%;
margin-top: 0; }
h3 { font-size: 120%;
font-style: italic;
margin-top: 1em; }
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 35
The CSS for the web page (continued)
/* the styles used in the main division */
h2 {
font-size: 130%;
margin-top: 1.5em;
margin-bottom: 0; }
.speakers {
line-height: 1.5;
margin-top: .5em; }
a { font-weight: bold; }
a:link { color: #ef9c00; }
a:visited { color: #facd8a; }
a:active { color: green; }
#main p { margin-bottom: 0; }
em { font-weight: bold; }
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 36
The CSS for the web page (continued)
/* the styles for the footer division */
#footer {
margin-top: 2em;
border-top: 2px solid #ef9c00;
padding-top: .7em; }
#footer p {
font-size: 80%;
text-align: right;
margin: 0; }
HTML, XHTML, and CSS, C5
© 2010, Mike Murach & Associates, Inc.
Slide 37