424
Chapter 10
CSS uses a 
n
box model to control how 
elements are displayed.
Boxes consist of the content area and optional 
n
padding, border, and margin.
The content area contains the content of the 
n
element.
The padding is used to create visual space 
n
around the content area.
The border surrounds the padding and content 
n
and provides a way to visually separate the 
content.
The margin surrounds the border, padding, 
n
and content, and allows space to be added 
between the element and other elements.
Padding, border, and margin are all optional. 
n
An element’s background will show under the 
n
content and the padding, but not under the 
margin.  
Padding and margin size can be set in pixels 
n
or percentages.  
Border width can be set in pixels or by using 
n
the keywords thin, medium, and thick.
There are eight different styles for borders, 
n
including solid, dashed, dotted, and ridge.
When setting margins, padding, or the border, 
n
CSS provides properties for setting all the 
sides (top, right, bottom, left) at once, or it 
allows them to be set independently.
Use the 
n
line-height property to add space 
between lines of text.
You can place an image in the background 
n
of an element with the background-image 
property.  
Use the 
n
background-position and background-
repeat properties to set the position and tiling 
behavior of the background image.
Use the class attribute for elements that you 
n
want to style together, as a group.
Use the id attribute to give an element a 
n
unique name.  You can also use the id 
attribute to provide a unique style for an 
element.
There should only be one element in a page 
n
with a given id.
You can select elements by their id using the 
n
id # selector; for example #myfavoriteid.
An element can have only one id, but it can 
n
belong to many classes.  
You can use more than one style sheet in your 
n
XHTML.
If two style sheets have conflicting property 
n
definitions, the style sheet that is last in the 
XHTML file will receive preference.
You can target media devices such as “print” 
n
or “handheld” by using the media attribute in 
your <link> element.
BULLET POINTS
review of boxes, backgrounds, classes, and ids
Pdf form field recognition - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
extract data from pdf forms; how to save pdf form data in reader
Pdf form field recognition - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
export excel to pdf form; how to save a pdf form in reader
the box model
you are here 
425
You’re really expanding your HTML & CSS skills. Strengthen those neural 
connections by doing a crossword. All the answers come from this chapter.
1
2
3
4
5
6
7
8
9
10
11
12
Across
2. CSS sees every element as a _____.
4. The preferred font-style used in the guarantee 
paragraph.
5. Optional <link> attribute for other kinds of 
______.
7. Between padding and margin.
9. We changed the ______ class to an id.
10. If you want your element to have a unique style, 
use this kind of selector.
11. The space between the content and the border.
12. Style of border we used on the guarantee 
paragraph.
Down
1. Publishing term for the space between lines.
2. Which kind of elixir do you get if you're not 
fully satisfed?
3. By default, background images do this.
6. Property used to increase the space between 
lines of text.
8. Padding, borders and margins are all ________.
XHTMLcross
family
Process Forms in Web Image Viewer | Online Tutorials
to show the results of processing the image field. RasterEdge OCR Engine; PDF Reading; Encode & Decode Twain Scanning; DICOM Reading; Form Recognition & Processing
pdf data extraction to excel; edit pdf form in reader
C# Image: How to Process Form in C# Project with .NET Image
Imaging.Form.Processing; using RasterEdge.Imaging.Form.Recognition; form drop out, form field / zone extraction profession imaging controls, PDF document, tiff
extracting data from pdf to excel; extracting data from pdf into excel
426
Chapter 10
L
1
B
2
O
X
R
3
E
L
G
4
E
O
R
G
I
A
U
P
D
M
5
E
D
I
A
L
6
B
7
O
8
R
D
E
R
I
B
I
P
A
N
E
N
T
T
G
9
U
A
R
A
N
T
E
E
I
10
D
R
-
O
Y
H
N
B
E
A
L
I
L
P
11
A
D
D
I
N
G
G
S
H
D
12
A
S
H
E
D
T
XHTMLcross Solution
exercise solutions
C# PDF - Read Barcode on PDF in C#.NET
Form Process. Data: Read, Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert, Delete, Update Field. C#.NET PDF Barcode Reader & Scanner Controls from
extract data from pdf table; pdf form data extraction
Process Forms in .NET Winforms | Online Tutorials
Click "Image Form Field" to create a single rectangular to show the results of processing the image field. & profession imaging controls, PDF document, image
extracting data from pdf files; extract data from pdf to excel
the box model
you are here 
427
See if you can identify the padding, border and margins of this paragraph. 
Mark all the padding and margins (left, right, top, and bottom):
Left 
margin
Right 
margin
Top margin
Bottom margin
Left 
padding
Right 
padding
Bottom padding
Top padding
Sharpen your pencil
Solution
VB.NET PDF - How to Decode Barcode from PDF
PDF Page. Image: Copy, Paste, Cut Image in Page. Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Data: Read, Extract Field
extract data from pdf form; using pdf forms to collect data
C# Imaging - Read 2D QR Code in C#.NET
and advertising field as a promotion tool. Besides, if you want to know more detailed information on barcode reading & recognition from PDF document using C#
sign pdf form reader; online form pdf output
428
Chapter 10
.guarantee {
line-height:      1.9em;
font-style:       italic;
font-family:      Georgia, “Times New Roman”, Times, serif;
color:            #444444;
border-color:     black;
border-width:     1px;
border-style:     solid;
background-color: #a7cece;
padding:          25px;
margin:           30px;
}
You can add the new properties anywhere in 
the rule. We added them at the top.
If you look at the guarantee paragraph as it’s supposed to look in its final form, it 
has a italic, serif font, a greater line height than the rest of the page, and if you’re 
looking really close, gray text. Write the CSS below to set the line height to 1.9em, 
the font style to italic, the color to #444444, and the font family to Georgia, ‘Times 
New Roman’, Times, serif. Here’s the solution... did you test it?
Notice that if a font name has spaces in it 
you should surround it with quotes.
An italic, serif font.
Increased line height.
Gray color gives the 
text a softer look.
Exercise 
Solutions
exercise solutions
this is a new chapter
429
11   
divs and spans
Advanced Web Construction
It’s time to get ready for heavy construction.  
In this chapter 
we’re going to roll out two new XHTML elements, called <div> and <span>. These 
are no simple “two by fours,” these are full blown steel beams.  With <div> and 
<span>, you’re going to build some serious supporting structures, and once you’ve 
got those structures in place, you’re going to be able to style them all in new and 
powerful ways. Now, we couldn’t help but notice that your CSS toolbelt is really 
starting to fill up, so it’s time to show you a few shortcuts that will make specifying all 
these properties a lot easier. And, we’ve also got some special guests in this chapter, 
the 
pseudo-classes
, which are going to allow you to create some very interesting 
selectors. (If you’re thinking that “pseudo-classes” would make a great name for your 
next band, too late, we beat you to it.)
Some builders say 
“measure twice, cut once.” 
I say “plan, div, and span.“
430
Chapter 11
You know, we’d love it if 
you could make the elixir specials 
a little more attractive on the 
Web page. Could you make it look 
just like our handout menu?
The elixir 
mixer, Alice
Here’s the handout menu with the elixir 
specials. Wow, the design is a lot different 
than the rest of the page: it’s thin, the 
text is centered, there are red headings, an 
aquamarine border around the whole thing, 
and even some cocktail graphics at the top.
Weekly Elixir 
Specials
Lemon Breeze
Chai Chiller
Black Brain Brew
The ultimate healthy drink, 
this elixir combines herbal 
botanicals, minerals, and 
vitamins with a twist of 
lemon into a smooth citrus 
wonder that will keep your 
immune system going all 
day and all night.
Not your traditional chai, 
this elixir mixes maté with 
chai spices and adds 
an extra chocolate kick 
for a caffeinated taste 
sensation on ice.
Want to boost your 
memory?  Try our Black 
Brain Brew elixir, made 
with black oolong tea and 
just a touch of espresso.  
Your brain will thank you 
for the boost.
Join us any evening for these and all 
our wonderful elixirs.
a new lounge assignment
divs and spans
you are here 
431
A close look at the elixirs XHTML
<h2>Weekly Elixir Specials</h2>
<p>
<img src=“images/yellow.gif” alt=“Lemon Breeze Elixir” />
</p>
<h3>Lemon Breeze</h3>
<p>
The ultimate healthy drink, this elixir combines
herbal botanicals, minerals, and vitamins with
a twist of lemon into a smooth citrus wonder
that will keep your immune system going all
day and all night.
</p>
<p>
<img src=“images/chai.gif” alt=“Chai Chiller Elixir” />
</p>
<h3>Chai Chiller</h3>
<p>
Not your traditional chai, this elixir mixes mat&eacute;
with chai spices and adds an extra chocolate kick for
a caffeinated taste sensation on ice.
</p>
<p>
<img src=“images/black.gif” alt=“Black Brain Brew Elixir” />
</p>
<h3>Black Brain Brew</h3>
<p>
Want to boost your memory? Try our Black Brain Brew
elixir, made with black oolong tea and just a touch
of espresso. Your brain will thank you for the boost.
</p>
<p>
Join us any evening for these and all our
other wonderful
<a href=“beverages/elixir.html”
title=“Head First Lounge Elixirs”>
elixirs</a>.
</p>
Alice sure has asked for a tall order, hasn’t she? She wants us to take the existing lounge 
XHTML and  make it look like the handout menu.  Hmmm... that looks challenging, but we 
do have CSS on our side, so let’s give it a try. But, before we jump right into styling, let’s get 
an overview of the existing XHTML. Here’s just the XHTML snippet for the elixir specials; 
you’ll find it in “lounge.html” in the “chapter11/lounge” folder:
The elixir specials section begins 
with an <h2> heading.
Each elixir has 
an image in a 
<p> element.
...a name, in an 
<h3> heading...
...and a 
description, 
also in a 
paragraph.
And, finally, at the 
bottom, there is 
another paragraph, with 
some text and a link to 
the real elixirs page.
And this 
structure is 
repeated for 
each elixir.
We have 
three 
elixirs, 
each with 
the same 
structure.
432
Chapter 11
Jim:  Come on, Frank, you know we can just create a class or two and then 
style all the elixir elements separately from the rest of the page.
Frank:  That’s true. Maybe this isn’t so bad. I’m sure there is a simple 
property to make text align to the center  And we know how to handle the 
colored text. 
Jim:  Wait a sec, what about that border around everything?
Frank:  Piece of cake.  We just learned how to make borders.  Remember, 
every element can have one.
Joe:  Hmm, I don’t think so.  If you look at the XHTML, this is a bunch 
of 
<h2>
<h3>
, and 
<p>
elements.  If we put separate borders on every 
element, they’ll just look like separate boxes.
Frank:  You’re right, Joe.  What we need is an element to nest all these 
other elements inside, so we can put a border on that.  Then we’ll have one 
border around everything in the elixirs section of the page.
Jim: Well, I see why you get paid the big bucks, Frank. Could we nest the 
elixir stuff inside a 
<p>
element, or a 
<blockquote>
?  
Frank:  We can’t use 
<p>
because 
<p>
can’t contain other block elements, 
and the headings and paragraphs are obviously block elements.  I don’t 
think we’d want to do that anyway; paragraphs are for text.
Joe:  And 
<blockquote>
’s not right either, because this is an elixir menu, 
not a quote.
Frank:  Actually, I think we’re on the right track. I’ve been reading a certain 
book on HTML & CSS and I’m just up to a section on a new element called 
<div>
. I think it might be the tool we need.
Joe:  
<div>
– what’s that? It sounds like it’s for math.
Frank:  That’s not far off, because a 
<div>
lets you divide your page into 
logical sections or groupings.
Jim: Hey, that sounds like exactly what we need!
Frank:  Yup. Let me show you guys how to divide a page into logical 
sections, and then I’ll show you what I know about 
<div>
...
This looks tough, guys. There 
are a lot of style changes we’ve 
got to make, and the elixirs style 
doesn’t really match the rest of 
the page.
Jim
Frank
Joe
a new element called div
divs and spans
you are here 
433
Let’s explore how we can divide 
a page into logical sections
This is a pretty normal 
looking page: lots of 
headings, paragraphs, 
and an image in there.
p
h2
img
h2
h1
p
p
p
Dogs
p
p
p
h1
h2
img
h2
p
Cats
Take a look at the Web page to the right: it’s a Web 
page for PetStorz.com and we’re going to spend a few 
pages looking at how we might add some additional 
structure to it by identifying some logical sections and 
then enclosing those inside a 
<div>
element. 
But by just focussing on the structure of the page, 
you can’t really tell a whole lot about the page. 
What elements make up the header? Is there a 
footer on the page? What are the content areas?
Okay, so our job is to locate “logical sections” 
in this page. What’s a logical section? It’s just 
a group of elements that are all related on the 
page. For instance, in the PetStorz.com Web 
page, there are some elements that are used for 
the cats area on the page, and some that are 
used for dogs. Let’s check it out.
Identifying your logical sections
The PetStorz page has two main content 
areas, one for cats, and one for dogs. It 
has some other areas too, but we’ll come 
back to those.
In this case, both the cats and dogs sections 
consist of two elements, a heading and a 
paragraph. But often these groupings can 
contain many more elements.
We’ve drawn an outline 
of the PetStorz page.
Documents you may be interested
Documents you may be interested