Learning Web Design Third Edition- P22 ppsx

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 Verdan

p {font-size: small; font-family: sans-serif;}

html

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

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

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

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.

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

Note

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 eleele-ments (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

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 inherited is not ties that proper , as . earlier noted

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 inherited is not ties that proper , as . earlier noted

Moving Forward with CSS

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 )

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.

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

img

h2 h2 p

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

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

FORMATTING

TEXT

(Plus More Selectors)

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

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.