Learning Web Design Third Edition- P24 pot

font Values: font-style font-weight font-variant font-size/line-height font-family see also values in System Fonts sidebar | inherit Default: depends on default value for each prop

The Font Properties

The shortcut font property

Specifying multiple font properties for each text element could get repetitive and lengthy, so the creators of CSS provided the shorthand font property that compiles all the font-related properties into one rule

font

Values: font-style font-weight font-variant font-size/line-height

font-family (see also values in System Fonts sidebar) | inherit

Default: depends on default value for each property listed

Applies to: all elements

Inherits: yes

The value of the font property is a list of values for all the font properties we just looked at, separated by character spaces In this property, the order of the values is important:

{ font: style weight variant size/line-height font-family }

At minimum, the font property must include a font-size value and a

font-fami-ly value, in that order Omitting one or putting them in the wrong order causes the entire rule to be invalid This is an example of a minimal font property value:

p { font: 1em sans-serif; } Once you’ve met the size and family requirements, the other values are optional and may appear in any order prior to the font-size When style, weight, or variant are omitted, they will revert back to normal There is one value in there, line-height, that we have not seen before As it sounds, it adjusts the height of the text line from baseline to baseline It appears just after font-size, separated by a slash, as shown in these examples

h3 { font: oblique bold small-caps 1.5em/1.8em Verdana, Arial, sans-serif; }

h2 { font: bold 1.75em/2 sans-serif; } Let’s use the shorthand font property to make some changes to the h2 headings

System Fonts

The font property also allows

designers to specify fonts from

the operating system of the user’s

computer or other viewing device

This may be useful when designing

a web application that blends in

with the surrounding desktop

environment The system font values

for the font property are:

caption

used for captioned controls

(buttons, menus, etc.)

icon

used to label icons

menu

used in drop-down menus and

menu lists

message-box

used in dialog boxes

small-caption

used for labeling small controls

status-bar

used in window status bars

System Fonts

The font property also allows

designers to specify fonts from

the operating system of the user’s

computer or other viewing device

This may be useful when designing

a web application that blends in

with the surrounding desktop

environment The system font values

for the font property are:

caption

used for captioned controls

(buttons, menus, etc.)

icon

used to label icons

menu

used in drop-down menus and

menu lists

message-box

used in dialog boxes

small-caption

used for labeling small controls

status-bar

used in window status bars

One last tweak to the menu, then we’ll take a brief break I

want the h2 headings to be in a bold, Georgia (serif) typeface

to stand out from the surrounding text I also want it to be

1.2 times larger than the body font Instead of writing out

three declarations, we’ll combine them in one shorthand font

property Add this rule to the style sheet, save your work, and

take another look in the browser (Figure 12-13) Notice that the

font-size and font-family are next to one another and are the

last things in the list of values

h2 { font: bold 1.2em Georgia, serif; }

You might find it redundant that I included the bold font-weight value in this rule After all, the h2 elements were already bold, right? The thing about shorthand properties is that if you omit a value, it is reset to the default value for that property;

it doesn’t just leave it the way it was before In this case, the default value for font-weight is normal Because a style sheet rule we’ve written overrides the browser’s default bold rendering of headings, the h2s would appear in normal weight text if we don’t explicitly make them bold in the font property Shorthand properties can be tricky that way pay attention that you don’t leave something out and override a default or inherited value you were counting on.

exercise 12-1 | Formatting a menu (continued)

h2 after {font: bold 1.2em Georgia, serif;}

h2 before

Figure 12-13 Changing multiple properties for h2 elements with the shorthand font

property

Changing Text Color

You got a glimpse of how to change text color in Chapter 11, and to be honest,

there’s not a lot more to say about it here You change the color of text with

the color property

color

Values: color value (name or numeric) | inherit

Default: depends on the browser and user’s preferences

Applies to: all elements

Inherits: yes

Using the color property is very straightforward The value of the color

property can be one of 17 predefined color names or a numeric value

describ-ing a specific RGB color Here are a few examples, all of which make the h1

elements in a document gray:

h1 { color: gray; }

h1 { color: #666666; }

h1 { color: #666; }

Don’t worry about the numeric values for now—I just wanted you to see

what they look like RGB color is discussed in detail in Chapter 13, Colors

and Backgrounds, so in this chapter, we’ll just stick with the fairly limited list

of color names (see sidebar) for demonstration purposes

Color is inherited, so you could change the color of all the text in a document

by applying the color property to the body element, as shown here:

body { color: fuchsia; }

OK, so you probably wouldn’t want all your text to be fuchsia, but you get

the idea

Color Names

The 17 standard color names defined in CSS2.1:

A t A G l A n c e Color Names

The 17 standard color names defined in CSS2.1:

A t A G l A n c e

A Few More Selector Types

For the sake of accuracy, I want to point out that the color property is not strictly a text-related property In fact, according to the CSS specification, it

is used to change the foreground (as opposed to the background) color of an element The foreground of an element consists of both the text it contains

as well as its border

When you apply a color to an element (including image elements), that color will be used for the border as well, unless there is a specific border-color

property that overrides it We’ll talk more about borders and border color in

Chapter 14, Thinking Inside the Box Before we add color to the online menu, I want to take a little side trip and introduce you to a few more types of selectors that will give us much more flexibility in targeting elements in the document for styling

A Few More Selector Types

So far, we’ve been using element names as selectors In the last chapter, you saw how selectors can be grouped together in a comma-separated list so you can apply properties to several elements at once Here are examples of the selectors you already know

element selector p { color: navy; }

grouped selectors p, ul, p, td, th { color: navy; } The disadvantage of selecting elements this way, of course, is that the prop-erty (in this case, navy blue text) will apply to every paragraph and other listed elements in the document Sometimes, you want to apply a rule to a particular paragraph or paragraphs In this section, we’ll look at three selec-tor types that allow us to do just that: descendant selecselec-tors, ID selecselec-tors, and class selectors

Descendant selectors

A descendant selector targets elements that are contained within (therefore descendants of) another element It is an example of a contextual selector, because it selects the element based on its context or relation to another ele-ment The sidebar, Other Contextual Selectors, lists some more

Descendant selectors are indicated in a list separated by a character space This example targets emphasized text (em) elements, but only when they

appear in list items (li) Emphasized text in paragraphs and other elements would be unaffected (Figure 12-14)

li em { color: olive; }

A character space between

element names means that

the second element must

be contained within the

first.

A character space between

element names means that

the second element must

be contained within the

first.

li em {property: value;}

html

em

ul

Figure 12-14 Only em elements within li elements are selected The other em elements

are unaffected.

Here’s another example that shows how contextual selectors can be grouped

in a comma-separated list, just as we saw earlier This rule targets em

ele-ments, but only when they appear in h1, h2, and h3 headings

h1 em, h2 em, h3 em { color: red; }

It is also possible to nest descendant selectors several layers deep This

exam-ple targets em elements that appear in anchors (a) in ordered lists (ol)

ol a em { font-variant: small-caps; }

ID selectors

Way back in Chapter 5, Marking Up Text, we learned about the id attribute

that gives an element a unique identifying name (its id reference) The id

attribute can be used with any (X)HTML element, and it is commonly used

to give meaning to the generic div and span elements (We also saw it used

in Chapter 6, Adding Links to create document fragments and in Chapter 9,

Forms to associate a text label with its respective form control.)

ID selectors allow you to target elements by their id values The symbol that

identifies ID selectors is the octothorpe (#), also called a hash symbol

Here is an example of a list item with an id reference

<li id="catalog1234">Happy Face T-shirt</li>

Now you can write a style rule just for that list item using an ID selector, like

so (notice the # preceding the id reference):

li#catalog1234 { color: red; }

Because id values must be unique in the document, it is acceptable to omit

the element name This rule is equivalent to the last one:

#catalog1234 { color: red; }

Other Contextual Selectors

Descendant selectors are one of three types of contextual selectors

The other two, child selectors

and adjacent sibling selectors , are defined in CSS2.1 but unfortunately, are not supported in Internet Explorer 6 and earlier They are supported in IE7.

A child selector is similar to a descendant selector, but it targets only the direct children of a given element (there may be no other hierarchical levels in between)

They are indicated with the greater than symbol (>) This rule affects emphasized text, but only when it

is directly contained in a p element The em elements in other elements, such as list items (li) or anchors (a) would not be affected.

p > em {font-weight: bold; }

An adjacent sibling selector is used

to target an element that comes directly after another element with the same parent It is indicated with

a plus (+) sign This rule gives special treatment just to paragraphs that follow an h1 Other paragraphs are unaffected.

h1 + p {font-style: italic;}

Other Contextual Selectors

Descendant selectors are one of three types of contextual selectors

The other two, child selectors

and adjacent sibling selectors , are defined in CSS2.1 but unfortunately, are not supported in Internet Explorer 6 and earlier They are supported in IE7.

A child selector is similar to a descendant selector, but it targets only the direct children of a given element (there may be no other hierarchical levels in between)

They are indicated with the greater than symbol (>) This rule affects emphasized text, but only when it

is directly contained in a p element The em elements in other elements, such as list items (li) or anchors (a) would not be affected.

p > em {font-weight: bold; }

An adjacent sibling selector is used

to target an element that comes directly after another element with the same parent It is indicated with

a plus (+) sign This rule gives special treatment just to paragraphs that follow an h1 Other paragraphs are unaffected.

h1 + p {font-style: italic;}

The # symbol identifies an

ID selector.

The # symbol identifies an

ID selector.

ID values must start with a letter (A-Z or a-z) In addition to let-ters, the name may contain digits (0-9), hyphens (-), underscores (_), colons (:), and periods (.).

R e m I n D e R

ID values must start with a letter (A-Z or a-z) In addition to let-ters, the name may contain digits (0-9), hyphens (-), underscores (_), colons (:), and periods (.).

R e m I n D e R

A Few More Selector Types

You can also use an ID selector as part of a contextual selector In this example,

a style is applied only to li elements that appear within any element identi-fied as “sidebar.” In this way, you can treat list items in the sidebar differently than all the other list items on the page without any additional markup

#sidebar li { margin-left: 10px; } You should be beginning to see the power of selectors and how they can be used strategically along with well-planned, semantic markup

Class selectors

One last selector type, then we can get back to text style properties The other element identifier you learned about in Chapter 5 is the class identifier, used

to classify elements into a conceptual group Unlike the id attribute, multiple elements may share a class name Not only that, an element may belong to more than one class

You can target elements belonging to the same class with, you guessed it, a class selector Class names are indicated with a period (.) in the selector For example, to select all paragraphs with class="special", use this selector (the period indicates the following word is a class selector):

p.special { color: orange; }

To apply a property to all elements of the same class, omit the element name

in the selector (be sure to leave the period; it’s the character that indicates a class) This would target all paragraphs and any other element that has been marked up with class="special"

.special { color: orange; }

Specificity 101

In Chapter 11, I introduced you to the term specificity, which refers to the fact that more specific selectors have more weight when it comes to handling style rule conflicts Now that you know a few more selectors, it is a good time

to revisit this very important concept

The actual system CSS uses for calculating selector specificity is quite com-plicated, but this list of selector types from most to least specific should serve you well in most scenarios

ID selectors are more specific than (and will override)

Class selectors, which are more specific than (and will override)

Contextual selectors, which are more specific than (and will override)

Individual element selectors

So, for example, if a style sheet has two conflicting rules for the strong element, strong { color: red;}

h1 strong { color: blue; }

•

•

•

•

The period (.) symbol

indicates a class selector.

The period (.) symbol

indicates a class selector.

Try using a contextual (descendant)

selector before adding unnecessary

class attributes to your markup It

will keep your markup simple and

your style sheet streamlined To read

more, see Tantek Çelik’s blog post,

Context before Class , at tantek.com/

log/2002/12.html#atoc_cbeforec It

is a few years old, but still relevant.

c S S t I P

Try using a contextual (descendant)

selector before adding unnecessary

class attributes to your markup It

will keep your markup simple and

your style sheet streamlined To read

more, see Tantek Çelik’s blog post,

Context before Class , at tantek.com/

log/2002/12.html#atoc_cbeforec It

is a few years old, but still relevant.

c S S t I P

The Universal

Selector

CSS2 introduced a universal

element selector (*) that matches

any element (like a wildcard in

programming languages) The style

rule

* {color: gray; }

makes every element in a document

gray It is also useful as a contextual

selector, as shown in this example

that selects all elements in an intro

section:

#intro * { color: gray; }

The universal selector causes

problems with form controls in some

browsers If your page contains form

inputs, the safest bet is to avoid the

universal selector

The Universal

Selector

CSS2 introduced a universal

element selector (*) that matches

any element (like a wildcard in

programming languages) The style

rule

* {color: gray; }

makes every element in a document

gray It is also useful as a contextual

selector, as shown in this example

that selects all elements in an intro

section:

#intro * { color: gray; }

The universal selector causes

problems with form controls in some

browsers If your page contains form

inputs, the safest bet is to avoid the

universal selector

the contextual selector (h1 strong) is more specific and therefore has more

weight than the element selector

You can use specificity strategically to keep your style sheets simple and your

markup minimal For example, it is possible to set a style for an element (p, in

this example), then override when necessary by using more specific selectors

p { line-height: 1.2em; }

blockquote p { line-height: 1em; }

p.intro { line-height: 2em; }

In these examples, p elements that appear within a blockquote have a smaller

line height than ordinary paragraphs However, all paragraphs with a class

of “intro” will have a 2em line height, even if it appears within a blockquote,

because class selectors are more specific than contextual selectors

Understanding the concepts of inheritance and specificity are critical to

mas-tering CSS There is a lot more to be said about specificity, including a

tuto-rial by Andy Clarke that uses a Star Wars analogy to bring the point home

References are provided in the More About Specificity sidebar

Now, back to the menu Fortunately, our Black Goose Bistro has been marked

up thoroughly and semantically, so we have a lot of options for selecting

spe-cific elements Give these new selectors a try in Exercise 12-2

More About Specificity

The specificity overview in this chapter is enough to get you started, but when you get more experienced and your style sheets become more complicated, you may find that you need a more thorough understanding of the inner workings For the very technical explanation of exactly how specificity is calculated, see the CSS Recommendation at

www.w3.org/TR/2003/WD-CSS21-20030915/cascade.html#specificity Eric Meyer provides a thorough, yet more digestible, description of this system in his book, Cascading Style Sheets, The Definitive Guide, 2nd Edition (O’Reilly Media).

I also recommend the online article,

CSS: Specificity Wars, by Andy Clarke which explains specificity

in terms of “Sith power” using characters from Star Wars (www.

stuffandnonsense.co.uk/archives/

css_specificity_wars.html) He also provides a list of links to further specificity resources.

More About Specificity

The specificity overview in this chapter is enough to get you started, but when you get more experienced and your style sheets become more complicated, you may find that you need a more thorough understanding of the inner workings For the very technical explanation of exactly how specificity is calculated, see the CSS Recommendation at

www.w3.org/TR/2003/WD-CSS21-20030915/cascade.html#specificity Eric Meyer provides a thorough, yet more digestible, description of this system in his book, Cascading Style Sheets, The Definitive Guide, 2nd Edition (O’Reilly Media).

I also recommend the online article,

CSS: Specificity Wars, by Andy Clarke which explains specificity

in terms of “Sith power” using characters from Star Wars (www.

stuffandnonsense.co.uk/archives/

css_specificity_wars.html) He also provides a list of links to further specificity resources.

exercise 12-2 | Using selectors

This time, we'll add a few more style rules using descendant, ID, and class selectors

combined with the font and color properties we’ve learned about so far.

I’d like to add some color to the “new item!” elements next to certain menu item

names They are marked up as strong, so we can apply the color property to the

strong element Add this rule to the embedded style sheet, save the file, and

reload it in the browser.

strong { color: maroon; }

That worked, but now the strong element “Very spicy” in the description is

maroon, too, and that’s not what I want The solution is to use a contextual

selector that targets only the strong elements that appear in dt elements Try this

and take a look.

dt strong { color: maroon; }

Look at the document source and you will see that the content has been divided

into three unique divs: header, appetizers, and entrees We can use these to our

advantage when it comes to styling For now, let’s do something simple and make

all the text in the header teal Because color inherits, we only need to apply the

property to the div and it will be passed down to the h1 and p.

#header { color: teal; }

Now let’s get a little fancier and make the paragraph inside the header italic in

a way that doesn’t affect the other paragraphs on the page Again, a contextual

selector is the answer This rule selects only paragraphs contained within the

header section of the document.

#header p { font-style: italic; }

1.

2.

3.

exercise 12-2 | Using selectors

This time, we'll add a few more style rules using descendant, ID, and class selectors

combined with the font and color properties we’ve learned about so far.

I’d like to add some color to the “new item!” elements next to certain menu item

names They are marked up as strong, so we can apply the color property to the

strong element Add this rule to the embedded style sheet, save the file, and

reload it in the browser.

strong { color: maroon; }

That worked, but now the strong element “Very spicy” in the description is

maroon, too, and that’s not what I want The solution is to use a contextual

selector that targets only the strong elements that appear in dt elements Try this

and take a look.

dt strong { color: maroon; }

Look at the document source and you will see that the content has been divided

into three unique divs: header, appetizers, and entrees We can use these to our

advantage when it comes to styling For now, let’s do something simple and make

all the text in the header teal Because color inherits, we only need to apply the

property to the div and it will be passed down to the h1 and p.

#header { color: teal; }

Now let’s get a little fancier and make the paragraph inside the header italic in

a way that doesn’t affect the other paragraphs on the page Again, a contextual

selector is the answer This rule selects only paragraphs contained within the

header section of the document.

#header p { font-style: italic; }

1.

2.

3.

Text Line Adjustments

Text Line Adjustments

The next batch of text properties has to do with the treatment of whole lines

of text rather than the shapes of characters They allow web authors to for-mat web text with indents, extra leading (space between lines), and different horizontal alignments, similar to print

I want to give special treatment to all of the prices on the menu Fortunately, they have all been marked up with span elements, like this:

<span class="price">$3.95</span>

So now all we have to do is write a rule using a class selector to change the font

to Georgia or some serif font and make them italic.

.price { font-style: italic;

font-family: Georgia, serif;

} Similarly, I can change the appearance of the text in the header that has been marked up as belonging to the “label” class to make them stand out.

.label { font-weight: bold;

font-variant: small-caps;

font-style: normal;

} Finally, there is a warning at the bottom of the page that I want to make small and red It has been given the class “warning,” so I can use that as a selector to target just that paragraph for styling While I’m at it, I’m going to apply the same style to the sup element (the footnote asterisk) earlier on the page so they match Note that I’ve used a grouped selector so I don’t need to write a separate rule p.warning, sup {

font-size: x-small;

color: red;

} Figure 12-15 shows the results of all these changes

Figure 12-15 The current state of the Black Goose Bistro online menu.

4.

5.

6.

Line height

The line-height property defines the minimum distance from baseline to

baseline in text A baseline is the imaginary line upon which the bottoms of

characters sit Line height in CSS is similar to leading in traditional

typeset-ting Although the line height is calculated from baseline to baseline, most

browsers split the extra space above and below the text, thus centering it in

the overall line height (Figure 12-16)

The line-height property is said to specify a “minimum” distance because if

you put a tall image on a line, the height of that line will expand to

accom-modate it

line-height

Values: number, length measurement, percentage | normal | inherit

Default: normal

Applies to: all elements

Inherits: yes

These examples show three different ways of making the line height twice the

height of the font size

p { line-height: 2; }

p { line-height: 2em; }

p { line-height: 200%; }

When a number is specified alone, as shown in the first example, it acts as a

scaling factor that is multiplied by the current font size to calculate the

line-height value Line line-heights can also be specified in one of the CSS length units,

but once again, the relative em unit is your best bet Ems and percentage

val-ues are based on the current font size In the three examples, if the text size is

16 pixels, the calculated line height would be 32 pixels (see Figure 12-16)

Size of 1 em for this text

Baseline

line-height: 2em;

line height is set to 2em (twice the text size);

the extra space is divided equally above and below the text line, centering it vertically in the line height.

Figure 12-16 In CSS, line height is measured from baseline to baseline, but browsers

center the text vertically in the line height

WARNING

There is a bug in Internet Explorer 6 and earlier that causes line height to get screwy when the element contains an inline image (or other replaced element) For details, see positioniseverything.net/ explorer/lineheightbug.html

WARNING

There is a bug in Internet Explorer 6 and earlier that causes line height to get screwy when the element contains an inline image (or other replaced element) For details, see positioniseverything.net/ explorer/lineheightbug.html

Text Line Adjustments

Indents

The text-indent property indents the first line of text by a specified amount (see note)

text-indent

Values: length measurement, percentage | inherit

Default: 0

Applies to: block-level elements and table cells

Inherits: yes

You can specify a length measurement or a percentage value for text-indent Percentage values are calculated based on the width of the parent element

Here are a few examples The results are shown in Figure 12-17 p#1 { text-indent: 2em; }

p#2 { text-indent: 25%; } p#3 { text-indent: -35px; }

2em

25%

–35px

Figure 12-17. Examples of the text-indent property.

Notice in the third example, a negative value was specified and that’s just fine

It will cause the first line of text to hang out to the left of the left text edge (also called a hanging indent)

The text-indent property inherits, but it is worth noting that the calculated values will be passed on to descendant elements So if a div is set to 800 pix-els wide with a 10% indent, a text-indent of 80 pixels will be passed down (not the 10% value)

Horizontal Alignment

You can align text for web pages just as you would in a word processing or desktop publishing program with the text-align property

Note

The text-indent property indents just

the first line of a block If you want space

along the whole side of the text block,

use one of the margin or padding

prop-erties to add it.

Designers may be accustomed to

specify-ing indents and margins in tandem, but

to be consistent with how CSS handles

them, margins will be discussed as part

of the box model in Chapter 16.

Note

The text-indent property indents just

the first line of a block If you want space

along the whole side of the text block,

use one of the margin or padding

prop-erties to add it.

Designers may be accustomed to

specify-ing indents and margins in tandem, but

to be consistent with how CSS handles

them, margins will be discussed as part

of the box model in Chapter 16.

If you use a hanging indent, be

sure that there is also a left margin

applied to the element Otherwise,

the hanging text may disappear off

the left edge of the browser window.

D e S I G n t I P

If you use a hanging indent, be

sure that there is also a left margin

applied to the element Otherwise,

the hanging text may disappear off

the left edge of the browser window.

D e S I G n t I P

Values: left | right | center | justify | inherit

Default: left for languages that read left to right; right for languages that read right to left;

Applies to: block-level elements and table cells

Inherits: yes

This is a fairly straightforward property to use The results of the various

text-align values are shown in Figure 12-18

text-align: left aligns text on the left margin

text-align: right aligns text on the right margin

text-align: center centers the text in the text block

text-align: justify aligns text on both right and left margins

text-align: left

text-align: right

text-align: center

text-align: justify

Figure 12-18 Examples of text-align values.

Good news—only four more text properties to go! Then we’ll be ready to try

a few of them out in the Black Goose Bistro menu

Underlines and Other “Decorations”

If you want to put a line under, over, or through text, or if you’d like to turn

the underline off under links, then the text-decoration is the property for

you

text-decoration

Values: none | underline | overline | line-through | blink | inherit

Default: none

Applies to: all elements

Inherits: no, but since lines are drawn across child elements they may look like they are “decorated” too