Learning Web Design Third Edition- P22 ppsx

Part III: CSS for Presentation
196
The Big Concepts
p {font-size: small; font-family: sans-serif;}
html
head
body
title style
h1 p p h2 p p p h2 p p
em img em em
Figure 11-7. Certain properties applied to the p element are inherited by their children.
Notice that I’ve been saying “certain” properties are inherited. It’s important
to note that some style sheet properties inherit and others do not. In gen-
eral, properties related to the styling of text—font size, color, style, etc.—are
passed down. Properties such as borders, margins, backgrounds, and so on
that affect the boxed area around the element tend not to be passed down.
This makes sense when you think about it. For example, if you put a border
around a paragraph, you wouldn’t want a border around every inline element
(such as em, strong, or a) it contains as well.
You can use inheritance to your advantage when writing style sheets. For
example, if you want all text elements to be rendered in the Verdana font face,
you could write separate style rules for every element in the document and
set the font-face to Verdana. A better way would be to write a single style rule
that applies the font-face property to the body element, and let all the text
elements contained in the body inherit that style (Figure 11-8).
p {font-size: small; font-family: sans-serif;}
html
head
body
title style
h1 p p h2 p p p h2 p p

em img em em
If you apply a font-related property to the body
element, it will be passed down to all the text elements
in the document (note that font properties do not apply
to the img element, so it is excluded).
Figure 11-8. All the elements in the document inherit certain properties applied to the
body element.
The Big Concepts
Chapter 11, Cascading Style Sheets Orientation
197
Any property applied to a specific element will override the inherited values
for that property. Going back to the article example, we could specify that
the em element should appear in a serif font, and that would override the
inherited sans-serif setting.
Conflicting styles: the cascade
Ever wonder why they are called “cascading” style sheets? CSS allows you
to apply several style sheets to the same document, which means there
are bound to be conflicts. For example, what should the browser do if a
document’s imported style sheet says that h1 elements should be red, but its
embedded style sheet has a rule that makes h1s purple?
The folks who wrote the style sheet specification anticipated this problem
and devised a hierarchical system that assigns different weights to the vari-
ous sources of style information. The cascade refers to what happens when
several sources of style information vie for control of the elements on a page:
style information is passed down until it is overridden by a style command
with more weight.
For example, if you don’t apply any style information to a web page, it will be
rendered according to the browser’s internal style sheet (we’ve been calling
this the default rendering). However, if the web page’s author provides a style
sheet for the document, that has more weight and overrides the browser’s

styles. Individual users can apply their own styles to documents as well, as
discussed in the Reader Style Sheets sidebar.
As we’ve learned, there are three ways to attach style information to the source
document, and they have a cascading order as well. Generally speaking, the
closer the style sheet is to the content, the more weight it is given. Embedded
style sheets that appear right in the document in the style element have
more weight than external style sheets. In the example that started this sec-
tion, the h1 elements would end up purple as specified in the embedded style
sheet, not red as specified in the external .css file that has less weight. Inline
styles have more weight than embedded style sheets because you can’t get any
closer to the content than a style right in the element’s opening tag.
To prevent a specific rule from being overridden, you can assign it
“importance” with the !important indicator, as explained in the Assigning
Importance sidebar.
The sidebar, Style Sheet Hierarchy, provides an overview of the cascading
order from general to specific.
Specificity
Once the applicable style sheet has been chosen, there may still be conflicts;
therefore, the cascade continues at the rule level. When two rules in a single
style sheet conflict, the type of selector is used to determine the winner. The
Reader Style Sheets
It is possible for users to write their
own style sheets and apply them
to the pages they see with their
browser. The CSS Recommendation
refers to these as reader style sheets
(in practice, it is more common to
use the term user style sheets).
Normally, style rules provided by
an author style sheet (external,

embedded, or inline) override the
reader’s style sheet. However, if the
user marks a style as “important,” it
will trump all other styles provided
by the author and the browser (see
the Assigning Importance sidebar).
So, for example, a user with impaired
vision could write a style rule
that makes all web text appear in
extra large black text on a white
background and be guaranteed to
see it that way. That’s precisely the
W3C’s intent in allowing reader style
sheets and giving them the power
to override all other styles.
Reader Style Sheets
It is possible for users to write their
own style sheets and apply them
to the pages they see with their
browser. The CSS Recommendation
refers to these as reader style sheets
(in practice, it is more common to
use the term user style sheets).
Normally, style rules provided by
an author style sheet (external,
embedded, or inline) override the
reader’s style sheet. However, if the
user marks a style as “important,” it
will trump all other styles provided
by the author and the browser (see

the Assigning Importance sidebar).
So, for example, a user with impaired
vision could write a style rule
that makes all web text appear in
extra large black text on a white
background and be guaranteed to
see it that way. That’s precisely the
W3C’s intent in allowing reader style
sheets and giving them the power
to override all other styles.
Part III: CSS for Presentation
198
The Big Concepts
more specific the selector, the more weight it is given to override conflicting
declarations.
It’s a little soon to be discussing specificity because we’ve only looked at one
type of selector (and the least specific type, at that). For now, put the term
specificity and the concept of some selectors overriding others on your radar.
We will revisit it in Chapter 12 when you have more selector types under
your belt.
Rule order
Finally, if there are conflicts within style rules of identical weight, whichever
one comes last in the list “wins.” Take these three rules, for example:
<style type="text/css">
p { color: red; }
p { color: blue; }
p { color: green; }
</style>
In this scenario, paragraph text will be green because the last rule in the style
sheet, that is, the one closest to the content in the document, overrides the

earlier ones.
Style Sheet
Hierarchy
Style information can come from
various sources, listed here from
general to specific. Items lower in
the list will override items above
them:
Browser default settings
User style settings (set in a
browser as a “reader style sheet”)
Linked external style sheet
(added with the
link
element)
Imported style sheets
(added with the
@import

function)
Embedded style sheets
(added with the
style
element)
Inline style information
(added with the
style
attribute
in an opening tag)
Any style rule marked

!important

by the author
Any style rule marked
!important

by the reader (user)








Style Sheet
Hierarchy
Style information can come from
various sources, listed here from
general to specific. Items lower in
the list will override items above
them:
Browser default settings
User style settings (set in a
browser as a “reader style sheet”)
Linked external style sheet
(added with the
link
element)
Imported style sheets

(added with the
@import

function)
Embedded style sheets
(added with the
style
element)
Inline style information
(added with the
style
attribute
in an opening tag)
Any style rule marked
!important

by the author
Any style rule marked
!important

by the reader (user)








Assigning Importance

If you want a rule not to be overridden by a subsequent conflicting rule, include the
!important
indicator just after the property value and before the semicolon for that
rule. For example, to make paragraph text blue always, use the following rule:
p {color: blue !important;}
Even if the browser encounters an inline style later in the document (which should
override a document-wide style sheet), like this one:
<p style="color: red">
that paragraph will still be blue, because the rule with the
!important
indicator
cannot be overridden by other styles in the author’s style sheet.
The only way an
!important rule
may be overridden is by a conflicting rule in a
reader (user) style sheet that has also been marked
!important
. This is to ensure that
special reader requirements, such as large type for the visually impaired, are never
overridden.
Based on the previous examples, if the reader’s style sheet includes this rule:
p {color: black;}
the text would still be blue, because all author styles (even those not marked
!important
) take precedence over the reader’s styles. However, if the conflicting
reader’s style is marked
!important
, like this:
p {color: black !important;}
the paragraphs will be black and cannot be overridden by any author-provided style.

The Big Concepts
Chapter 11, Cascading Style Sheets Orientation
199
N ote
This “last-one-listed wins” rule applies in other contexts in CSS as well. For example,
later declarations in a declaration block can override earlier declarations. In addition,
external style sheets listed later in the source will be given precedence over those listed
above them (even style sheets embedded with the style element).
The box model
As long as we’re talking about “big CSS concepts,” it is only appropriate
to introduce the cornerstone of the CSS visual formatting system: the box
model. The easiest way to think of the box model is that browsers see every
element on the page (both block and inline) as being contained in a little
rectangular box. You can apply properties such as borders, margins, padding,
and backgrounds to these boxes, and even reposition them on the page.
We’re going to go into a lot more detail about the box model in Chapter 14,
but having a general feel for the box model will benefit you even as we discuss
text and backgrounds in the following two chapters.
To see the elements roughly the way the browser sees them, I’ve written style
rules that add borders around every content element in our sample article.
h1 { border: 1px solid blue; }
h2 { border: 1px solid blue; }
p { border: 1px solid blue; }
em { border: 1px solid blue; }
img { border: 1px solid blue; }
Figure 11-9 shows the results. The borders reveal the shape of each block ele-
ment box. There are boxes around the inline elements (em and img), as well.
Notice that the block element boxes expand to fill the available width of the
browser window, which is the nature of block elements in the normal docu-
ment flow. Inline boxes encompass just the characters or image they contain.

Figure 11-9. Rules around all the elements reveal their element boxes.
Part III: CSS for Presentation
200
Moving Forward with CSS
Grouped Selectors
Hey! This is a good opportunity to show you a handy style rule shortcut. If
you ever need to apply the same style property to a number of elements, you
can group the selectors into one rule by separating them with commas. This
one rule has the same effect as the five rules listed previously. Grouping them
makes future edits more efficient and results in a smaller file size.
h1, h2, p, em, img { border: 1px solid blue; }
Now you’ve got two selector types in your toolbox: a simple element selector,
and grouped selectors.
Moving Forward with CSS
This chapter covered all the fundamentals of Cascading Style Sheets, includ-
ing rule syntax, ways to apply styles to a document, and the central concepts
of inheritance, the cascade, and the box model. Style sheets should no longer
be a mystery, and from this point on, we’ll merely be building on this founda-
tion by adding properties and selectors to your arsenal as well as expanding
on the concepts introduced here.
CSS is a vast topic, well beyond the scope of this book. The bookstores and
Web are loaded with information about style sheets for all skill levels. I’ve
compiled a list of the resources I’ve found the most useful during my learning
process. I’ve also provided a list of popular tools that assist in writing style
sheets in the CSS Tools sidebar.
Books
There is no shortage of good books on CSS out there, but these are the ones
that taught me, and I feel good recommending them.
Cascading Style Sheets: The Definitive Guide, Second Edition, by Eric Meyer
(O’Reilly)

Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm
(Friends of Ed)
The Zen of CSS Design: Visual Enlightenment for the Web, by Dave Shea and
Molly E. Holzschlag (New Riders)
Eric Meyer on CSS: Mastering the Language of Web Design, by Eric Meyer
(New Riders)
Online Resources
The sites on the following page are good starting points for online explora-
tion of style sheets.
Pop Quiz
Can you guess why I didn’t just add
the
border
property to the
body

element and let it inherit to all the
elements in the grouped selector?
Answer:
Because
border
is one of those
properties that is not inherited, as
noted earlier.
Pop Quiz
Can you guess why I didn’t just add
the
border
property to the
body

element and let it inherit to all the
elements in the grouped selector?
Answer:
Because
border
is one of those
properties that is not inherited, as
noted earlier.
Moving Forward with CSS
Chapter 11, Cascading Style Sheets Orientation
201
World Wide Web Consortium (www.w3.org/Style/CSS)
The World Wide Web Consortium oversees the development of web tech-
nologies, including CSS.
A List Apart (www.alistapart.com)
This online magazine features some of the best thinking and writing
on cutting-edge, standards-based web design. It was founded in 1998 by
Jeffrey Zeldman and Brian Platz.
css-discuss (www.css-discuss.org)
This is a mailing list and related site devoted to talking about CSS and
how to use it.
Inspirational CSS showcase sites
If you are looking for excellent examples of what can be done with CSS, check
out these sites.
CSS Zen Garden (www.cssgarden.com)
This is a showcase site for what can be done with CSS, a single XHTML
file, and the creative ideas of hundreds of designers. Its creator and keeper
is standards expert Dave Shea. See the companion book listed above.
CSS Beauty (www.cssbeauty.com)

A showcase of excellent sites designed in CSS.
Informative personal sites
Some of the best CSS resources are the blogs and personal sites of individuals
with a passion for CSS-based design. These are only a few, but they provide a
good entry point into the online standards community.
Stopdesign (www.stopdesign.com)
Douglas Bowman, CSS and graphic design guru, publishes articles and
trend-setting tutorials.
Mezzoblue (www.mezzoblue.com)
This is the personal site of Dave Shea, creator of the CSS Zen Garden.
Meyerweb (www.meyerweb.com)
This is the personal site of the king of CSS, Eric Meyer.
Molly.com (www.molly.com)
This is the blog of prolific author and web-standards activist Molly E.
Holzschlag.
Simplebits (www.simplebits.com)
This is the personal site of standards guru and author Dan Cederholm.
CSS Tools
The W3C maintains a list of current
CSS authoring tools on the CSS
home page at www.w3.org/Style/
CSS/#editors. Here are a couple that I
can personally recommend.
Web Developer
Extension
Web developers are raving about
the Web Developer extension for
Firefox and Mozilla browsers, written
by Chris Pederick. The extension
adds a toolbar to the browser with

tools that enable you to analyze and
manipulate any page in the window.
You can edit the style sheet for the
page you are viewing as well as get
information about the (X)HTML and
graphics. It also validates the CSS,
(X)HTML, and accessibility of the
page. Get it at chrispederick.com/
work/firefox/webdeveloper or from
the Addons page at mozilla.org.
Web Authoring
Programs
Current WYSIWYG authoring
programs such as Adobe
Dreamweaver and Microsoft
Expression Web can be configured
to write a style sheet for you
automatically as you design the
page. The downside is that they
are not always written in the most
efficient manner (for example, they
tend to overuse the
class
attribute
to create style rules). Still, they may
give you a good head start on the
style sheet that you can then edit
manually.
CSS Tools
The W3C maintains a list of current

CSS authoring tools on the CSS
home page at www.w3.org/Style/
CSS/#editors. Here are a couple that I
can personally recommend.
Web Developer
Extension
Web developers are raving about
the Web Developer extension for
Firefox and Mozilla browsers, written
by Chris Pederick. The extension
adds a toolbar to the browser with
tools that enable you to analyze and
manipulate any page in the window.
You can edit the style sheet for the
page you are viewing as well as get
information about the (X)HTML and
graphics. It also validates the CSS,
(X)HTML, and accessibility of the
page. Get it at chrispederick.com/
work/firefox/webdeveloper or from
the Addons page at mozilla.org.
Web Authoring
Programs
Current WYSIWYG authoring
programs such as Adobe
Dreamweaver and Microsoft
Expression Web can be configured
to write a style sheet for you
automatically as you design the
page. The downside is that they

are not always written in the most
efficient manner (for example, they
tend to overuse the
class
attribute
to create style rules). Still, they may
give you a good head start on the
style sheet that you can then edit
manually.
Part III: CSS for Presentation
202
Test Yourself
Test Yourself
Here are a few questions to test your knowledge of the CSS basics. Answers
are provided in Appendix A.
Identify the various parts of this style rule:
blockquote { line-height: 1.5; }
selector: _______________ value: ____________________
property: ______________ declaration: ________________
What color will paragraphs be when this embedded style sheet is applied
to a document? Why?
<style type="text/css">
p { color: purple; }
p { color: green; }
p { color: gray; }
</style>
Rewrite each of these CSS examples. Some of them are completely incor-
rect and some could just be written more efficiently.
p {font-face: sans-serif;}
p {font-size: 1em;}

p {line-height: 1.2em;}
blockquote {
font-size: 1em
line-height: 150%
color: gray }
body
{background-color: black;}
{color: #666;}
{margin-left: 12em;}
{margin-right: 12em;}
p {color: white;}
blockquote {color: white;}
li {color: white;}
<strong style="red">Act now!</strong>
1.
2.
3.
a.
b.
c.
d.
e.
html
head
body
title style h1 p
p p
img
h2 ph2
strong li li li

ul
div id= intro div id=main
Figure 11-10. The document structure of a sample document.
Circle all the elements in the diagram that
you would expect to appear in red when the
following style rule is applied to an XHTML
document with the structure diagrammed in
Figure 11-10. This rule uses a type of selec-
tor you haven’t seen yet, but common sense
should serve you well.
div#intro { color: red; }
4.
203
IN THIS CHAPTER
The font-related properties
Text color
Text line settings such
as line height, indents,
and alignment
Underlines and overlines
Capitalization
Letter and word spacing
Descendant (contextual),
ID, and class selectors
Specificity 101
Now that you’ve gotten your feet wet formatting text, are you ready to jump
into the deep end? By the end of this chapter, you’ll pick up fourteen new CSS
properties used to manipulate the appearance of text. Along the way, you’ll
also learn how to use more powerful selectors for targeting elements in a
particular context, and with a specific id or class name.

Throughout this chapter, we’ll be sprucing up the Black Goose Bistro online
menu that we marked up back in Chapter 5, Marking Up Text. I encourage
you to work along with the exercises to get a feel for how the properties
work. Figure 12-1 shows how the menu looked the last time we saw it and
how it will look when we’re done. It’s not a masterpiece, but it is certainly an
improvement.
Before
After
Figure 12-1. Before and after views of the Black Goose Bistro menu that we’ll be working
on in this chapter.
FORMATTING
TEXT
(Plus More Selectors)
CHAPTER
12
Part III: CSS for Presentation
204
The Font Properties
The Font Properties
When I design a text document (especially for print, but also for the Web),
one of the first things I do is specify the font. In CSS, fonts are specified using
a little bundle of font-related properties for typeface, size, weight, and font
style. There is also a shortcut property that lets you specify all of the font
attributes in one fell swoop.
The nature of the Web makes specifying type tricky, if not downright
frustrating, particularly if you have experience designing for print (or even
formatting text in a word processing program). Because you have no way of
knowing which fonts are loaded on users’ machines, you can’t be sure that
everyone will see text in the font you’ve chosen. And because the default font
size varies by browser and user preferences, you can’t be sure how large or

small the type will appear, as well. We’ll address the best practices for dealing
with these font challenges as we go along.
Specifying the font name
Choosing a typeface, or font family as it is called in CSS, is a good place to
start. Let’s begin with the easy part: using the property font-family and its
values.
font-family
Values:
one or more font or generic font family names, separated by commas |
inherit
Default:
depends on the browser
Applies to:
all elements
Inherits:
yes
Use the font-family property to specify a font or list of fonts by name as
shown in these examples.
body { font-family: Arial; }
tt { font-family: Courier, monospace; }
p { font-family: "Trebuchet MS", Verdana, sans-serif; }
All font names, with the exception of generic font families, must be capital-
ized. For example, use “Arial” instead of “arial”. Notice that font names that
contain a character space (such as Trebuchet MS in the third example) must
appear within quotation marks. Use commas to separate multiple font names
as shown in the second and third examples. You might be asking, “Why
specify more than one font?” That’s a good question, and it brings us to one
of the challenges of specifying fonts for web pages.
Font limitations
Browsers are limited to displaying fonts that are already installed on the user’s

machine. So, although you may want the text to appear in Futura, if Futura
is not installed on the user’s computer, the browser’s default font will be used
instead.
The font-related properties:
font-family

font-size
font-weight
font-style
font-variant

font






A t A G l A n c e
The font-related properties:
font-family

font-size
font-weight
font-style
font-variant

font







A t A G l A n c e
A Word About
Property Listings
Each new property listing in this
book is accompanied by information
on how it behaves and how to use it.
Here is a quick explanation of each
part of property listings.
Values
These are the accepted values
for the property according to the
CSS2.1 specification. Predefined
values appear in code font
(for example,
small
,
italic
, or
small-caps
) and must be typed
in exactly as shown.
Default
This is the value that will be used
for the property by default, that is,
if no other value is specified. Note
that the browser uses a style sheet

with values that may vary from
the defaults defined in CSS.
Applies to
Some properties apply only to
certain types of elements, such as
block or table elements.
Inherits
This indicates whether the
property will be passed down
to the selected element’s
descendants. See Chapter
11, Cascading Style Sheets
Orientation for an explanation of
inheritance.
A Word About
Property Listings
Each new property listing in this
book is accompanied by information
on how it behaves and how to use it.
Here is a quick explanation of each
part of property listings.
Values
These are the accepted values
for the property according to the
CSS2.1 specification. Predefined
values appear in code font
(for example,
small
,
italic

, or
small-caps
) and must be typed
in exactly as shown.
Default
This is the value that will be used
for the property by default, that is,
if no other value is specified. Note
that the browser uses a style sheet
with values that may vary from
the defaults defined in CSS.
Applies to
Some properties apply only to
certain types of elements, such as
block or table elements.
Inherits
This indicates whether the
property will be passed down
to the selected element’s
descendants. See Chapter
11, Cascading Style Sheets
Orientation for an explanation of
inheritance.
The Font Properties
Chapter 12, Formatting Text
205
Fortunately, CSS allows you to provide a list of back-up fonts should your
first choice not be available. In the third example above, if the browser does
not find Trebuchet MS, it will use Verdana, and if Verdana is not available, it
will substitute some other sans-serif font.

Generic font families
That last option, “some other sans-serif font,” bears more discussion. “Sans-
serif” is just one of five generic font families that you can specify with the
font-family property. When you specify a generic font family, the browser
chooses an available font from that stylistic category. Figure 12-2 shows
examples from each family. Generic font family names do not need to be
capitalized.
serif
Examples: Times, Times New Roman, Georgia
Serif typefaces have decorative serifs, or slab-like appendages, on the ends
of certain letter strokes.
sans-serif
Examples: Arial, Arial Black, Verdana, Trebuchet MS, Helvetica, Geneva
Sans-serif typefaces have straight letter strokes that do not end in serifs.
They are generally considered easier to read on computer monitors.
monospace
Examples: Courier, Courier New, and Andale Mono
In monospace (also called constant width) typefaces, all characters take
up the same amount of space on a line. For example, a capital W will be
no wider than a lowercase i. Compare this to proportional typefaces (such
as the one you’re reading now) that allot different widths to different char-
acters.
cursive
Examples: Apple Chancery, Zapf-Chancery, and Comic Sans
Cursive fonts emulate a script or handwritten appearance. These are
rarely specified for professional web pages.
fantasy
Examples: Impact, Western, or other decorative font
Fantasy fonts are purely decorative and would be appropriate for head-
lines and other display type. Fantasy fonts are rarely used for web text due

to cross-platform availability and legibility.
All of the font properties
are related to the shapes
of characters.
All of the font properties
are related to the shapes
of characters.