styling with fonts and colors
you are here 
343
Yellow
Orange
Maroon
Teal
Red
Purple
Olive
Navy
Lime
Aqua
Green
Gray
Fuchsia
Blue
Black
White
Silver
body {
color: silver;
}
Add color to your text with the color property.
You can change your text color with the color property. To do that, it 
helps to know a little about Web colors, and we’ll take you through all the 
ins and outs of color, including the mysterious color “hex codes.” 
bolder
bold
normal
lighter
body {
font-weight: bold;
}
Affect the weight of your fonts with the font-weight property.
Why settle for boring, average fonts when you can give them some extra 
weight when needed? Or, are your fonts looking too heavy? Slim them down 
to a normal weight. All this is easily done with the font-weight property.
body {
text-decoration: underline;
}
Add even more style to your text with the text-decoration property.
Using the text-decoration property you can decorate your text with 
decorations including overlines, underlines, and line-throughs. And if you didn’t 
get enough of blinking text on the Web in the 1990s, the designers of CSS have 
even included a blink value for text-decoration (although thankfully they 
don’t require browsers to implement it).
none
underline
overline
line-through
blink
Pdf form save with reader - 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
how to save fillable pdf form in reader; flatten pdf form in reader
Pdf form save with reader - 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
exporting data from pdf to excel; extracting data from pdf to excel
344
Chapter 9
What is a font family anyway?
You’ve already come across the font-family property, and so far you’ve 
always specified a value of “sans-serif”. You can get a lot more creative than 
that with the font-family property, but it helps to know what a font family 
is first. Here’s a quick rundown...
Times
Serif Family
Arial
Verdana
Geneva
Sans-serif Family
The sans-serif family includes fonts 
without serifs. These fonts are usually 
considered more readable on computer 
screens than serif fonts.
The serif family includes fonts with serifs. 
A lot of people associate the look of 
these fonts with newspaper print.
Each font-family contains a set of fonts that 
share common characteristics.  There are  five 
font families: sans-serif, serif, monospace, 
cursive, and fantasy. Each family includes a 
large set of fonts, so on this page you’ll see 
only a few examples of each.
Serifs are the 
decorative barbs 
and hooks on the 
ends of the letters.
Sans-serif means 
“without serifs”.
Fonts aren’t consistently available from 
one computer to another. In fact, the set of 
available fonts will vary depending on the 
operating system as well as what fonts and 
applications a user has installed.  So keep 
in mind that the fonts on your machine may 
differ from what is available to your users. 
Times New Roman
Arial Black
Trebuchet MS
Georgia
overview of font families
C# PDF: PDF Document Viewer & Reader SDK for Windows Forms
SaveFile(String filePath): Save PDF document file to a specified path form (Here, we take a blank form as an open a file dialog and load your PDF document in
extract pdf form data to excel; pdf data extraction
VB.NET Image: How to Save Image & Print Image Using VB.NET
printing multi-page document files, like PDF and Word is used to illustrate how to save a sample RE__Test Public Partial Class Form1 Inherits Form Public Sub New
extract data from pdf using java; extract data from pdf file to excel
styling with fonts and colors
you are here 
345
Courier
Monospace Family
Comic Sans 
Apple Chancery
Cursive Family
The Cursive family 
includes fonts that 
look handwritten. You’ll 
sometimes see these fonts 
used in headings.
The Monospace family is made up of fonts that have constant 
width characters. For instance, the horizontal space an “i” takes 
up will be the same width that an “m” takes up. These fonts are 
primarily used to show software code examples.
Last NinjA
Impact
Fantasy Family
The Fantasy font family contains 
stylized decorative fonts. These fonts 
are usually not widely available and are 
rarely used for serious Web designs. 
Take a good look at the font families: serif 
fonts have an elegant, traditional look, 
while sans-serif fonts have a very clean and 
readable look.  Monospace fonts feel like 
they were typed on a typewriter.  Cursive and 
Fantasy fonts have a playful or stylized feel.
Andale Mono
Courier New
C# PDF File Merge Library: Merge, append PDF files in C#.net, ASP.
Merge Microsoft Office Word, Excel and PowerPoint data to PDF form. Append one PDF file to the end of another and save to a single PDF file.
online form pdf output; how to fill pdf form in reader
VB.NET PDF Page Delete Library: remove PDF pages in vb.net, ASP.
this RasterEdge XDoc.PDF SDK, you can simply delete a single page from a PDF document using VB.NET or remove any page from a PDF document and save to local
change font size pdf form reader; extracting data from pdf files
346
Chapter 9
Font Magnets
Your job is to help the fictional fonts below find their way home 
to their own font family. Move each fridge magnet on the left into 
the correct font family on the right. Check your answers before 
you move on. Review the font family descriptions on the previous 
pages if you need to.
Quarter
Nautica
Crush
Savannah
Messenger
Iceland
Angel
Palomino
Cartoon
Bainbridge
Serif Family
Monospace Family
Cursive Family
Sans-serif Family
Fantasy Family
develop your sense of fonts
C# PDF Page Extract Library: copy, paste, cut PDF pages in C#.net
to extract single or multiple pages from adobe PDF file and save into a The portable document format, known as PDF document, is a widely-used form of file
extract data from pdf file; how to fill out a pdf form with reader
C# Image: Save or Print Document and Image in Web Viewer
or image, you can easily save the changes to DLL Library, including documents TIFF, PDF, Excel, Word string fileName = Request.Form["saveFileName"]; string fid
using pdf forms to collect data; how to save a pdf form in reader
styling with fonts and colors
you are here 
347
Okay, so there are a lot of good fonts out there from several font families. How do 
you get them in your pages? Well, you’ve already had a peek at the font-family 
property in the last chapter, when you specified a font-family of “sans-serif” for 
the lounge. Here’s a more interesting example:
Specifying font families using CSS
body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
Check to see if the font 
Verdana is available on the 
computer and if so, use 
it as the font for this 
element (in this case, the 
<body> element).
You can specify more than one 
font using the font-family 
property. Just type the font 
names separated by commas. 
Write font names as they 
are spelled, including upper- 
and lower-case letters.
Always put a generic font family name at the 
end, like “serif”, “sans-serif”, “cursive”, or 
“monospace”. You’ll see what this does in a sec.
How font-family specifications work
Here’s how the browser interprets the fonts listed in your font-family specification:
body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
If Verdana isn’t 
available, then look 
for the font Geneva, 
and if it is available, 
use it for the body.
Finally, if none of the specific 
fonts can be found, just use 
whatever the browser considers 
its default “sans-serif” font.
You don’t have to specify four alternative fonts; you 
can have two, three, etc. In the last chapter we only 
used one - the default sans-serif font - although 
we don’t recommend that because it doesn’t give you 
much control over the fonts you’d like used.
The font-family property gives you a way to create a list of preferred fonts. 
Hopefully most browsers will have one of your first choices, but if not, you can at least 
be assured that the browser will provide a generic font from the same family. 
Let’s get some fonts into your pages...
If Geneva isn’t 
available, then look for 
the font Arial, and if 
it is available, use it 
for the body.
Usually your font-family specification contains a 
list of alternative fonts, all from the same family.
C# PDF Convert to Tiff SDK: Convert PDF to tiff images in C#.net
Description: Convert to DOCX/TIFF with specified zoom value and save it into stream. Parameters: zoomValue, The magnification of the original PDF page size.
extracting data from pdf forms; how to save filled out pdf form in reader
C# Create PDF from Tiff Library to convert tif images to PDF in C#
Description: Convert to PDF and save it on the disk. Parameters: Name, Description, Valid Value. Description: Convert to PDF and save it into stream. Parameters:
cannot save pdf form in reader; save pdf forms in reader
348
Chapter 9
Dusting off Tony’s Journal
Now that you know how to specify fonts, let’s take 
another look at Tony’s Segway’n USA page and 
give it a different look. We’ll be making some small, 
incremental changes to the text styles in Tony’s 
page and while no single change is going to look 
dramatically different, by the end of the chapter 
we think you’ll agree the site has a slick new look. 
Let’s get an idea of where we might make some 
improvements and then let’s give Tony a new 
font-family.
Remember that we haven’t applied 
any styles to Tony’s site, so his site 
is using a serif font-family for the 
entire page.
The quote is just indented.  It 
would be nice to improve its look 
a bit by adding some font-style.
The default size of the heading fonts is also pretty 
large and doesn’t make for an attractive page.
Except for the photos, this page 
is rather monochromatic, so we’ll 
also add some font color to make 
it a little more interesting.
improving tony’s journal
C# PDF Convert to Word SDK: Convert PDF to Word library in C#.net
key. Quick to remove watermark and save PDF text, image, table, hyperlink and bookmark to Word without losing format. Powerful components
can reader edit pdf forms; extract table data from pdf to excel
C# Create PDF from PowerPoint Library to convert pptx, ppt to PDF
Description: Convert to PDF/TIFF and save it on the disk. Parameters: Description: Convert to PDF/TIFF and save it into stream. Parameters:
extract data from pdf c#; sign pdf form reader
styling with fonts and colors
you are here 
349
body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
Getting Tony a new font-family
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1” />
<link type=“text/css” rel=“stylesheet” href=“journal.css” />
<title>My Trip Around the USA on a Segway</title>
</head>
<body>
.
.
.
</body>
</html>
Let’s get Tony set up with a font-family. We’re going to start with 
some clean sans-serif fonts.  First, create a new file, “journal.css” in the 
“chapter9/journal” folder and add this rule:
Remember, you fixed up Tony’s journal to 
be strict XHTML in Chapter 7.
We’ve chosen a set of 
sans-serif fonts here.
You’ll see Verdana 
on most PCs.
And Geneva on 
most Macs.
Arial is 
common 
on both.
And if all else 
fails, we have 
the default 
sans-serif.
We’re setting the 
font-family property 
on the <body> element.  
Remember, the 
elements in the <body> 
will inherit these fonts.
After you’ve made this change, save the file, fire up your browser and load the page.
Now you need to link Tony’s journal to the new style sheet file.  To do that, open 
the file “journal.html” in the “chapter9/journal” folder.  All you need to add is the 
<link>
element to link in the style in “journal.css”, like we did below.  
Here’s where we’re 
linking in the new 
“journal.css” file.
350
Chapter 9
Test driving Tony’s new fonts
The font definitely gives Tony’s Web page a 
new look.  The headings now have a cleaner look 
without the serifs on the letters, although they 
still look a tad large on the page.
Open the page with the new CSS in the browser and you 
should see we’ve now got a nice set of sans-serif fonts. 
Let’s check out the changes... 
The paragraph text is also 
clean and very readable.
Because font-family is an inherited property, 
all elements on the page are now using a  
sans-serif font, even the list elements...
... and the <blockquote>s.
And if the serif fonts were more 
your cup of tea, don’t let us stop you.  
You can always redo the font-family 
declaration to use serif fonts.
Q: 
How do I specify a font 
with multiple words in the 
name, like Courier New?
A: 
Just put double quotes 
around the name in your font-
family declaration, like this:  
font-family: “Courier New”, 
Courier; 
Q: 
So the font-family 
property is really a set of 
alternative fonts?
A: 
Yes.  It’s basically a 
priority list of fonts. The first is 
the font you’d like used, followed 
by a good substitute, followed by 
more substitutes, and so on. For 
the last font, you should specify 
the catch-all generic “sans-serif” 
or “serif”, which should be in the 
same family as all the fonts in 
your list.
Q: 
Are “serif” and “sans-
serif” real fonts?
A: 
“serif” and “sans-serif” 
are not the names of actual 
fonts.  However, your browser 
will substitute a real font in 
place of “serif” or “sans-serif” if 
the other fonts before it in the 
font-family declaration can’t be 
found.  The font used in its place 
will be whatever the browser 
has defined as the default font in 
that family.
Q: 
How do I know which 
to use? Serif or sans-serif?
A: 
There are no rules. 
However, on a computer display, 
many people consider sans-serif 
the best for body text. You’ll 
find plenty of designs that use 
serif for body text, or mix serif 
fonts with sans-serif fonts. So, 
it really is up to you and what 
kind of look you want your page 
to have.
there are no
Dumb Questions
some fonts questions
styling with fonts and colors
you are here 
351
How do I deal with everyone having 
different fonts?
font-family: Verdana, Geneva, Arial, sans-serif;
The unfortunate thing about fonts is that you 
can’t control what fonts are on your users’ 
computers. The best you can do is to create a 
list of fonts that are most appropriate for your 
pages and then hope the user has one of those 
fonts installed.  If they don’t, well, at least we 
can count on the browser to supply a generic 
font in the same font family.
At least, that’s the basic strategy for ensuring 
your page is displayed using appropriate 
fonts. But it turns out, given the differences 
in fonts between operating systems (especially 
Windows versus Mac), you do have to take 
this a little further to really do your job well. 
What you need to do is ensure that your 
font-family declaration includes fonts that 
are likely to occur on both Windows and the 
Mac (as well as any other platforms your users 
might be using, like Linux or perhaps mobile 
devices).
Here’s a quick guide to some of the common 
fonts on each operating system, but we 
encourage you to explore this area more if you 
need to closely control the fonts on your pages.
Andale Mono
Arial
Arial Black
Comic Sans
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
Geneva
Courier
Helvetica
Times
These fonts 
are likely to 
be available on 
both Windows 
and Macintosh 
computers.
These fonts are 
most likely to be 
found on Macintosh 
computers.
(1) We’d like for 
Verdana to be 
used, but...
(2) If it’s not, Geneva would 
be nice, but this will probably 
only happen on Macs. But if 
it’s not...
(3) That’s okay, because we 
can probably count on Arial 
to be on either Windows or 
Macs, but if it’s not...
(4) Then that’s still 
okay, we’ll just let the 
browser choose a sans-
serif font for us.
Let’s take a look at 
our definition for Tony’s 
pages again...
352
Chapter 9
font-size: 14px;
You can specify your font size in pixels, just like the pixel dimensions you used 
for images in Chapter 5. When you specify font size in pixels, you’re telling 
the browser how many pixels tall the letters should be. 
In CSS you specify pixels with 
a number followed by “px”. 
This says that the font-size 
should be 14 pixels high.
h i p
Setting a font to 14 pixels high 
means that there will be 14 
pixels between the lowest part of 
the letters and the highest.
14 pixels
The px must come right after the number of 
pixels.  You can’t have a space in between.
Adjusting font sizes
Now that Tony has a new set of fonts, we need to work on those font sizes, as most 
people find the default sizes of the headings a bit large, at least aesthetically. To do 
that, you need to know how to specify font sizes, and there are actually a few ways to 
do this.   Let’s take a look at some ways to specify font-size and then we’ll talk 
about how best to specify font size so they are consistent and user friendly.
font-size: 150%;
Unlike pixels, which tell the font exactly how big it should be in pixels, a font size specified 
as a percentage tells the font how big it should be relative to another font size. So,
says that the font size should be 
150% of another font size.  But, 
which other font size?  Well, since 
font-size is a property that is 
inherited from the parent element, 
when you specify a % font size, it is 
relative to the parent element.  Let’s 
check out how that works...
body { 
font-size: 14px; 
}
h1 {
font-size: 150%;
}
px
%
If you do things right, any 
user will be able to increase 
the font sizes on your Web 
page for readability.  You’ll 
see how in a couple of pages.
Here we’ve specified a body font size in 
pixels, and a level one heading as 150%.
body { 
font-size: 14px; 
}
Here’s how you’d specify  
font-size within a body rule.
how to specify font sizes
Documents you may be interested
Documents you may be interested