Learning Web Design Third Edition- P25 pdf

Part III: CSS for Presentation
226
Changing Capitalization
The values for text-decoration are intuitive and are shown in Figure 12-19
text-decoration: underline underlines the element
text-decoration: overline draws a line over the text
text-decoration: line-through draws a line through the text
text-decoration: blink makes text flash on and off
The most popular use of the text-decoration property is turning off the
underlines that appear automatically under linked text, as shown here:
a { text-decoration: none; }
There are a few cautionary words to be said regarding text-decoration.
First, be sure there are other cues such as color, weight, or a bottom bor-
der to compensate.
On the flip-side, because underlines are such a strong visual cue to “click
here,” underlining text that is not a link may be misleading and frustrat-
ing. Consider whether italics may be an acceptable alternative.
Finally, there is no reason to make your text blink. Internet Explorer won’t
support it anyway.
Changing Capitalization
I remember when desktop publishing programs introduced a nifty feature
that let me change the capitalization of text on the fly. This made it easy to see
how my headlines might look in all capital letters without needing to retype
them. CSS includes this feature as well with the text-transform property.
text-transform
Values:

none
|
capitalize
|

lowercase
|
uppercase
|
inherit

Default:

none

Applies to:
all elements
Inherits:
yes
When you apply the text-transform property to a text element, it changes
its capitalization when it renders without changing the way it is typed in the
source. The values are as follows (Figure 12-20):
text-transform: none as it is typed in the source
text-transform: capitalize capitalizes the first letter of each word
text-transform: lowercase makes all letters lowercase
text-transform: uppercase makes all letters uppercase
•
•
•
text-decoration: underline
text-decoration: overline
text-decoration: line-through
Figure 12-19. Examples of text-
decoration values.
text-decoration: underline

text-decoration: overline
text-decoration: line-through
Figure 12-19. Examples of text-
decoration values.
If you turn off underlines
under links, do so with
care because the underline
is a strong visual cue that
something is clickable.
If you turn off underlines
under links, do so with
care because the underline
is a strong visual cue that
something is clickable.
Spaced Out
Chapter 12, Formatting Text
227
text-transform: normal (as was typed in)
text-transform: capitalize
text-transform: lowercase
text-transform: uppercase
Figure 12-20. The text-transform property changes the capitalization of characters
when they are displayed, regardless of how they are typed in the source.
Spaced Out
The final two text properties in this chapter are used to insert space between
letters (letter-spacing) or words (word-spacing) when the text is displayed.
letter-spacing
Values:
length measurement,
normal

|
inherit

Default:

normal

Applies to:
all elements
Inherits:
yes
word-spacing
Values:
length measurement,
normal
|
inherit

Default:

normal

Applies to:
all elements
Inherits:
yes
The best way to get to know these properties is by example. When you
provide a length measurement, that much space will be added between the
letters of the text (letter-spacing) or words in a line (word-spacing). Figure
12-21 shows the results of these rule examples applied to the simple para-

graph shown here.
The style sheet
p { letter-spacing: 8px; }
p { word-spacing: 1.5em; }
The markup
<p>Black Goose Bistro Summer Menu</p>
It is worth noting that when you specify em measurements, the calculated
size is passed down to child elements, even if they have a smaller font size
than the parent.
Part III: CSS for Presentation
228
Spaced Out
word-spacing: 1.5em;
letter-spacing: 8px;
Figure 12-21. letter-spacing (top) and word-spacing (bottom).
In Exercise 12-3, we’ll make one last trip back to the Black Goose Bistro menu
to add some of these new properties and make a few tweaks.
In the interest of saving space and keeping this an introductory-
level book, these properties were not given the full treatment.
But being the type of author who doesn’t hold anything back,
I’m including them here. Learn more about them at the W3C
site (www.w3.org/TR/CSS21/).
vertical-align
Values:
baseline
|
sub
|
super
|

top
|
text-top
|
middle
|
text-
bottom
|
bottom
| percentage | length |
inherit
Specifies the vertical alignment of an inline element’s baseline
relative to the baseline of the surrounding text. It is also used to
set the vertical alignment of content in a table cell (
td
).
white-space
Values:
normal
|
pre
|
nowrap
|
pre-wrap
|
pre-line
|
inherit

Specifies how white space in the element source is handled
in layout. For example, the
pre
value preserves the character
spaces and returns found in the source, similar to the
pre

(X)HTML element.
visibility
Values:
visible
|
hidden
|
collapse
|
inherit
Used to hide the element. When set to
hidden
, the element is
invisible, but the space it occupies is maintained, leaving a hole
in the content. The element is still there; you just can’t see it.
text-direction
Values:
ltr
|
rtl
|
inherit
Specifies the direction the text reads, left to right (

ltr
) or right
to left (
rtl
).
unicode-bidi
Values:
normal
|
embed
|
bidi-override
|
inherit
Related to bi-directional features of Unicode. The
Recommendation states that it allows the author to generate
levels of embedding within the Unicode embedding algorithm.
If you have no idea what this means, don’t worry. Neither do
I. But I guess it’s there should you need it for seriously multi-
lingual sites.
The Other Text Properties
exercise 12-3
|
Finishing up the menu
Let’s add a few finishing touches to the online menu, menu_summer.html. It might
be useful to save the file and look at it in the browser after each step to see the effect
of your edits and to make sure you’re on track. The finished style sheet is provided in
Appendix A.
First, I have a few global changes to the
body

element in mind. I’ve had a change
of heart about the
font-family
. I think that a serif font such as Georgia would be
more sophisticated and appropriate for a bistro menu. Let’s also use the
line-
height
property to open up the text lines and make them easier to read. Make
these updates to the
body
style rule, as shown:
1.
Spaced Out
Chapter 12, Formatting Text
229
body {
font-family: Georgia, serif;
font-size: small;
line-height: 175%;
}
I also want to redesign the header section of the document. First, remove the teal
color setting by deleting that whole rule. Get rid of the
font-variant
property for
the
h1
element as well. Once that is done, make the
h1
purple and the paragraph
in the header gray. You can just add color declarations to the existing rules.

#header { color: teal; } /* delete */
h1 {
font-size: 1.5em;
font-variant: small-caps; /* delete */
color: purple; }
#header p {
font-style: italic;
color: gray; }
Next, to imitate a fancy print menu, I’m going to center a few key elements on
the page using the
text-align
property. Write a rule with a grouped selector to
center the whole header
div
, the
h2
elements, and the paragraphs contained
within the “appetizer” and “entrees”
div
s, like this:
#header, h2, #appetizers p, #entrees p {
text-align: center; }
I want to make the “Appetizer” and “Main Courses”
h2
headings kind of special.
Instead of large, bold type, I’m actually going to reduce the
font-size
, and use all
uppercase letters, extra letter spacing, and color to call attention to the headings.
Here’s the new rule for

h2
elements that includes all of these changes.
h2 {
font: bold 1em Georgia, serif; /* reduced from 1.2 em */
text-transform: uppercase;
letter-spacing: 8px;
color: purple; }
We’re really close now; just a few more tweaks. Add a rule
using contextual selectors that makes the paragraphs in
the Appetizers and Main Courses sections italic.
#appetizers p, #entrees p {
font-style: italic; }
Finally, we’ll add a softer color to the menu item names
(in
dt
elements). Note that the
strong
elements in those
dt
elements stay maroon because the color applied to
the
strong
elements overrides the color inherited by
their parents.
dt {
font-weight: bold;
color: olive;}
And we’re done! Figure 12-22 shows how the menu looks
now an improvement over the unstyled version, and we
used text properties to do it. Notice that we didn’t touch

a single character of the document markup in the process.
That’s the beauty of keeping style separate from structure.
2.
3.
4.
5.
6.
Adding letter spacing to small type
is one of my favorite heading design
tricks. It is a good alternative to large
type for drawing attention to the
element.
D e S I G n t I P
Adding letter spacing to small type
is one of my favorite heading design
tricks. It is a good alternative to large
type for drawing attention to the
element.
D e S I G n t I P
Figure 12-22. The formatted Black Goose
Bistro menu.
Part III: CSS for Presentation
230
Test Yourself
Test Yourself
Here are a few questions to see how well you picked up the fundamentals of
selectors and text formatting.
Here is a chance to get a little practice writing selectors. Using the diagram
shown in Figure 12-23, write style rules that makes each of the elements
described below red (color: red;). Write the selector as efficiently as

possible. I’ve done the first one for you.
html
head
body
title style h1 div id="intro" div id="main" p
p class="special"
ul h2 p h2
p class="special"
img strong li li li strong
Figure 12-23. Sample document structure.
All text elements in the document body {color: red;}
h2 elements
h1 elements and all paragraphs
Elements belonging to the class “special”
All elements in the “intro” section
strong elements in the “main” section
Extra credit: Just the paragraph that appears after an h2 (hint: this
selector will not work in Internet Explorer 6)
1.
a.
b.
c.
d.
e.
f.
g.
Test Yourself
Chapter 12, Formatting Text
231
Match the style property with the text samples in Figure 12-24.

_______ {font-size: 1.5em;}
_______ {text-transform: capitalize;}
_______ {text-align: right;}
_______ {font-family: Verdana; font-size: 1.5em;}
_______ {letter-spacing: 3px;}
_______ {font: bold italic 1.2em Verdana;}
_______ {text-transform: uppercase;}
_______ {text-indent: 2em;}
_______ {font-variant: small-caps;}
Default font and size
1
2
3
4
5
6
7
8
9
Figure 12-24. Text samples.
2.
a.
b.
c.
d.
e.
f.
g.
h.
i.

Part III: CSS for Presentation
232
CSS Review: Font and Text Properties
CSS Review: Font and Text Properties
In this chapter, we covered the properties used to format text elements. Here
is a summary in alphabetical order.
Property Description
font
A shorthand property that combines font properties
font-family
Specifies a typeface or generic font family
font-size
The size of the font
font-style
Specifies italic or oblique fonts
font-variant
Specifies a small-caps font
font-weight
Specifies the boldness of the font
letter-spacing
Inserts space between letters
line-height
The distance between baselines of neighboring text lines
text-align
The horizontal alignment of text
text-decoration
Underlines, overlines, and lines through
text-direction
Whether the text reads left-to-right or right-to-left
text-indent

Amount of indentation of the first line in a block
text-transform
Changes the capitalization of text when it displays
unicode-bidi
Works with Unicode bidirectional algorithms
vertical-align
Adjusts vertical position of inline elements relative to the base-
line
visibility
Whether the element is rendered or is invisible
white-space
How white space in the source is displayed
word-spacing
Inserts space between words
233
IN THIS CHAPTER
Color names in CSS
Specifying RGB color values
Foreground and
background colors
Pseudoclass and
pseudoelement selectors
Adding tiling
background images
Controlling the repeat
and position of
background images
External style sheets
Style sheets for print and
other media

Did you happen to see the Web back in 1993? It was a fairly dreary affair
back then, where every background was gray and all the text was black. Then
came the Netscape browser and, with it, a handful of attributes that allowed
rudimentary (but welcome) control over font colors and backgrounds. For
years, we made do.
But thankfully, now we have style sheet properties that blow those old attri-
butes out of the water. So if you happen to view the source of a web page and
see attributes such as bgcolor, background, link, and vlink floating around,
ignore them. They are relics of the past. Believe me, you’re much better off
without them.
We’re going to cover a lot of ground in this chapter. Of course, I’ll introduce
you to all of the properties for specifying colors and backgrounds. This chap-
ter also rounds out your collection of selector types and shows you how to
create an external style sheet as well as a style sheet just for print. Oh, and
there will be cabbages lots and lots of cabbages (you’ll see).
Our first order of business is to talk about the options for specifying color in
CSS, including a primer on the nature of color on computer monitors.
Specifying Color Values
There are two main ways to specify colors in style sheets: with a predefined
color name as we have been doing so far:
color: red; color: olive; color: blue;
or, more commonly, with a numeric value that describes a particular RGB
color (the color model on computer monitors). You’ve probably seen color
values that look like these:
color: #FF0000; color: #808000; color: #00F;
We’ll get to all the ins and outs of RGB color in a moment, but first, a short
and sweet section on the standard color names.
COLORS AND
BACKGROUNDS
(Plus Even More Selectors and External Style Sheets)

CHAPTER
13
Part III: CSS for Presentation
234
Specifying Color Values
Color names
The most intuitive way to specify a color is to call it by name. Unfortunately,
you can’t make up just any color name and expect it to work. It has to be one
of the color keywords predefined in the CSS Recommendation. CSS1 and
CSS2 adopted the 16 standard color names originally introduced in HTML
4.01. CSS2.1 tossed in orange for a total of 17. Color names are easy to use—
just drop one into place as the value for any color-related property:
color: silver;
background-color: gray;
border-bottom-color: teal;
Figure 13-1 shows printed approximations of the 17 color keywords in CSS2.1
(they will look different on computer screens, of course). I threw in their
numeric values for good measure.
Black
#000000
Gray
#808080
Silver
#C0C0C0
White
#FFFFFF
Maroon
#800000
Red
#FF0000

Purple
#800080
Fuchsia
#FF00FF
Green
#008000
Lime
#00FF00
Olive
#808000
Yellow
#FFFF00
Navy
#000080
Blue
#0000FF
Teal
#008080
Aqua
#0000FF
Orange (CSS 2.1)
#FFA500
Figure 13-1. The 17 standard color names in CSS2.1.
RGB color values
Names are easy, but as you can see, they are limited. By far, the most common
way to specify a color is by its RGB value. It also gives you millions of colors
to choose from.
For those who are not familiar with how computers deal with color, I’ll start
with the basics before jumping into the CSS syntax.
Extended Color

Names
CSS Level 3 has a new color module
that gives you a whopping 140
color names to choose from.
The module uses a set of color
keywords originally introduced by
the X Window System. These colors
have historically been supported
by browsers as (X)HTML attribute
values, but this is the first time
they’ve been standardized for CSS.
Some day, we’ll be able to specify
names like blanchedalmond,
burlywood, and papayawhip. Won’t
that be special?
Unfortunately, they’re not well
supported for use in style sheets
at this time, but if you’re curious,
you can see the full list online at
www.
learningwebdesign.com/
colornames.html
or in the CSS3
proposal at
www.w3.org/TR/css3-
color/#svg-color
.
Extended Color
Names
CSS Level 3 has a new color module

that gives you a whopping 140
color names to choose from.
The module uses a set of color
keywords originally introduced by
the X Window System. These colors
have historically been supported
by browsers as (X)HTML attribute
values, but this is the first time
they’ve been standardized for CSS.
Some day, we’ll be able to specify
names like blanchedalmond,
burlywood, and papayawhip. Won’t
that be special?
Unfortunately, they’re not well
supported for use in style sheets
at this time, but if you’re curious,
you can see the full list online at
www.
learningwebdesign.com/
colornames.html
or in the CSS3
proposal at
www.w3.org/TR/css3-
color/#svg-color
.
Specifying Color Values
Chapter 13, Colors and Backgrounds
235
The RGB color model
R: 255

(100%)
G: 255
(100%)
B: 255
(100%)
RGB: 255, 255, 255
White
RGB: 128, 128, 128
Gray
RGB: 0, 0, 0
Black
RGB: 200, 178, 130
Pleasant lavender
R: 128
(50%)
G: 128
(50%)
B: 128
(50%)
R: 0
(0%)
G: 0
(0%)
B: 0
(0%)
R: 200
(78%)
R: 178
(70%)
R: 130

(51%)
Why 255?
In true RGB color, 8 bits of information are devoted to each color channel.
8 bits can describe 256 shades (28
8
=256), so colors are measured on a scale from 0 to 255.
A word about RGB color
Computers create the colors you see on a monitor by combining three colors
of light: red, green, and blue. This is known as the RGB color model. You can
provide recipes (of sorts) for colors by telling the computer how much of
each color to mix in. The amount of light in each color “channel” is typically
described on a scale from 0 (none) to 255 (full-blast), although it can also be
provided as a percent. The closer the three values get to 255 (100%), the closer
the resulting color gets to white (Figure 13-2).
Any color you see on your monitor can be described by a series of three
numbers: a red value, a green value, and a blue value. This is one of the ways
that image editors such as Adobe Photoshop keep track of the colors for every
pixel in an image. With the RGB color system, a pleasant lavender can be
described as 200, 178, 230.
Picking a color
The easiest way to pick a color and find its RGB color values is to use
an image editing tool such as Adobe Photoshop, Photoshop Elements or
Corel Paint Shop Pro. Most image tools provide a Color Picker similar to
Photoshop’s shown in Figure 13-3. When you select a color from the spectrum
in the Color Picker, the red (R), green (G), and blue (B) values are listed, as
pointed out in the figure. And look next to the # symbol—those are the same
values, converted so they are ready to go in a style sheet. I’ll explain the 6-digit
hex values in a moment.
Figure 13-2. Colors on computer monitors
are made by mixing different amounts

of red, green, and blue light (thus, RGB).
The color in the middle of each diagram
shows what happens when the three color
channels are combined. The more light in
each channel, the closer the combination
is to white.
Figure 13-2. Colors on computer monitors
are made by mixing different amounts
of red, green, and blue light (thus, RGB).
The color in the middle of each diagram
shows what happens when the three color
channels are combined. The more light in
each channel, the closer the combination
is to white.