Transcript Controlling Position, Part 1: Introducing the Box Model

Using the Box Model, <div>
& <span> Elements
CSCI N241: Fundamentals of Web Design
Copyright ©2006  Department of Computer & Information Science
Goals
By the end of this unit, you should understand …
• … how to use padding, borders and margins
using the CSS Box Model.
• … how to arrange elements into logical groups
using the <div> element.
• … how to apply styles to the <div> element.
• … how to apply styles to inline text &
elements using the <span> element.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The line-height Property
• We can use the line-height property
to control the vertical space between
lines in an element.
• The default (normal) line-height is
120% of the font size.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Defining line-height
• We can define line-height in one
of three ways:
– Using a scaling factor (a number indicating
a multiplicative factor of the font-size)
– Using a length unit, like em.
– Using percentages of font-size.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let's Try One!
• Download and unzip the file
"n241IntroBoxModel_examples.zip."
• Open the file called "css/lounge.css" and
add the following declaration to the body
rule:
line-height: 1.6em;
• Try a few other measurements for the lineheight: 150%, 20px, .5em, 2, etc.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Introducing the Box Model
• CSS looks at each element (text,
images, etc.) as a box.
• Each box consists of four things:
the content, padding, border and
margins.
• Let's explore each …
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The Content Area
• The content area includes text or images and
the box the browser traces around that
content (which is just big enough to fit the
content).
NOTE: The dashed line above illustrates the content area box. A
browser would not draw an actual line!
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Padding
• Around the content area box, we can have
optional padding. Padding is transparent and
we can use it to create "visual whitespace"
between the content area and the border.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Border
• An element's border surrounds the
padding. It is a line around the content
and provides a "visual separation
between" elements.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Margin
• A margin gives space between an
element and other elements in a web
page. Like the padding, a margin is
transparent.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let's Try One!
• Add the following class to lounge.css:
.guarantee
{
line-height: 1.9em;
font-style: italic;
font-family: Georgia,
"Times New Roman", Times, serif;
color: #444;
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #A7CECE;
}
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Keep Goin' …
• Find the paragraph that begins
"Our guarantee: at the lounge …"
and apply the class:
<p class = "guarantee">
Our guarantee: at the
lounge, we're committed to
…
</p>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Still Goin' …
• Add the following declarations to the
.guarantee rule:
padding: 25px;
margin: 30px;
• Also, let's add a background image:
background-image:
url(../images/background.gif);
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
What's Up with the Background?
• We can control the background image
with two additional properties:
– The background-repeat property allows us to
make a background image repeat in a specified
pattern, or not at all. It takes three values:
• repeat-x
• repeat-y
• no-repeat
– With the background-position, we can specify
the origin image (starting point) for a background.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Updating the Background Image
• Add the following declarations to the
.guarantee class:
background-repeat: no repeat;
background-position: top-left;
• Also add the following under the original
padding declaration:
padding-left: 80px;
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Finishing our Class
• Let's offset our class a little more.
Change the border-style to a dashed
border and make it white:
border-style: dashed;
border-color: white;
• Finally, add the following rule, to offset
the right margin:
margin-right: 250px;
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
More on the id Attribute
• The id attribute uniquely identifies an
element throughout a web page/website.
• We can also write classes for those
specific elements, when we one want a
certain style to affect only a single
element.
• Let's update our .guarantee class to
work with an id attribute …
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Converting a Class to Work with
an id Attribute
• First, rename .guarantee to
#guarantee.
• Finally, find the paragraph in
lounge.html that uses the
.guarantee class and remove its
class attribute. Replace it with the
following:
<p id="guarantee">
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Building Pages Using a
Logical Flow
• We know how to group things using
structure -- <p>, <h1>, <h2>, etc. But
what if you wanted to apply a style to a
group of elements that are logically
related?
• The best solution is to use the <div>
element to group varied elements into
one cohesive, logical group.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Without a
Logical Flow
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
With a Logical
Flow
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
More on <div>
• By itself, the <div> element does
not change the style/flow of the
elements nested inside it.
• However, we can apply styles to
elements grouped inside a <div> to
do things like changing the layout
of a web page …
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Adding a <div> to lounge.html
• Open the file lounge.html. Enclose
the elements between
<h2>Weekly Elixir Specials</h2>
and
<p>Join us any evening … </p>
using the following <div>:
<div id = "elixirs">…</div>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Specifying a <div> Style
• Add the following to your lounge.css:
#elixirs
{
line-height: 1;
border: solid thin #007E7E;
width: 200px;
padding: 0px 20px 20px 20px;
margin-left: 20px;
text-align: center;
}
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Keep Goin' …
• Add the following declarations to the
#elixirs rule:
background-image:
url(../images/cocktail.gif);
background-repeat:
repeat-x;
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Changing the Style of Common
Elements Nested in a <div>
• What if we want to change the styles of
common elements, like the <h2> (for
which we've already created a style)
which are nested inside a <div>.
• We don't want to change all <h2>
elements … only those inside the elixirs
<div>.
• The best way to accomplish this is to
use descendant selectors …
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Descendant Selectors
• We can use descendant selectors to apply
styles to selected only under certain
conditions.
• For example, if we wanted to apply a specific
style to <em> elements, but only when we nest
them inside an <li> element, we would write
a rule like this:
li em
{
}
Declarations go here …
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Using Descendant Selectors
• Add the following rules to lounge.css:
#elixirs h2
{
color: black;
}
#elixirs h3
{
color: #D12C47;
}
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Keep Goin' …
• Add these rules, as well:
#elixirs a:link, #elixirs a:visited
{
color: #007E7E;
}
#elixirs a:hover
{
background-color: #F88396;
color: #0D5353;
}
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
One More …
• Let's also create a style for the
copyright information at the bottom of
the page.
• First, find the <p> at the bottom of the
page and then nest it inside the
following <div>:
<div id = "copyright"> … </div>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Adding Style to the Copyright
• Add the following rule to lounge.css:
#copyright
{
font-size: 70%;
text-align: center;
line-height: normal;
margin-top: 30px;
}
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Applying Styles to Inline
Text/Elements
• So far, we've been concentrating on
applying styles to structural tags like
<h2>, <p> or <div>.
• What if we wanted to apply a style to
just a few words (inline text) or to an
inline element?
• We could use the <span> element …
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The <span> Element
• We use the <span> element to
apply styles to inline text or inline
elements.
• Like <div>, applying a <span>
without an associated style class
or id declaration will do nothing.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let's Try One!
• Add the following rules to your
lounge.css file:
.cd
{
font-style: italic;
}
.artist
{
font-weight: bold;
}
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Keep Goin' …
• Look for the <ul> under the title
labeled "What's playing at the
Lounge." For each <li> apply the cd
and artist classes, like this:
<li>
<span class="cd">Buddha Bar</span>,
<span class="artist">Claude Challe</span>
</li>
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
What's to come?
• Next unit, we'll consider the advanced
layout features of CSS.
• Just to give you a taste, let's try a very
simple layout.
• First, we need to make a few minor
modifications to our lounge.html …
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Movin on Up!
• Find the elixirs <div> and move
the entire <div> to just below the
<p> containing the lounge logo, near
the top of the page.
• Next, add the following declaration
to the #elixirs rule:
float: right;
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Next Time …
• Next time, we cover the following:
– Understanding the "cascade" in Cascading
Style Sheets
– Working with advanced page layout
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Questions?
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
References
• Freeman, Elisabeth and Eric
Freeman. Head First HTML with
CSS & XHTML. Sebastopol, CA:
2006.
• Neiderst-Robbins, Jennifer. Web
Design in a Nutshell, Third
Edition. Sebastopol, CA: 2006.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science