Formatting Text (Plus More Selectors)

Learning Web Design: Chapter 12

Lesson Overview Learn how to specify the

formatting of text using CSS Learn about the font-related properties Understand text line setting such as

line height, indents, and alignment Understand the basics of text color,

underlines, and capitalization Learn more about various selector

types and specificity

Styling Textual Elements

One of the first things a Web designer does is make decisions about the appearance of textual elements on the site

The font properties are an important part of the presentational layer and should be controlled by style sheets

Do not take text formatting lightly, it can be an important part of branding a Web site

The Font CSS Properties You will learn to make use of a set of

font-related properties to specify the appearance of textual elements

If you do not specify a property, the default browser styles will be applied to your text

We will also discuss the font limitations we have with Web design that print designers do not deal with

The Font-Family Property The font-family property changes the

general family of the text or typeface p {font-family: Arial;}

All font names except generic fonts must be capitalized

Font names with two words must be enclosed in “ ” p { font-family: “Trebuchet MS”;}

Using a Font-Family List Only typefaces that are available on a

user’s (client) machine can be displayed A list of font-families can be given to make

sure if the first one is not found, then the next will be displayed, etc.

Often the list of fonts is given for different platforms like: PC font, Mac font, generic font

For example: p {font-family: Arial, Helvetica, sans-serif; }

Generic Font Families The font-family property can be used

to set one of the five generic font families: serif, sans-serif, cursive, fantasy and

monospace These generic font families are used as

defaults and often appear at the end of font-family lists For sans-serif, this means as a last option use

some kind of sans-serif font The names of these generic font families are

not capitalized

Serif vs Sans-Serif Fonts serif typefaces have decorative serifs or

appendages on the ends of certain letter strokes Examples: Times New Roman, Georgia

sans-serif typefaces have straight letter strokes without serifs Considered to be more readable on a

computer screen Examples: Arial, Verdana, Lucinda Sans

Monospace, Cursive and Fantasy

Monospace fonts have a constant width for all characters in the typeface Examples: Courier, Monotype Corsiva

Cursive fonts emulate script or handwriting and are rarely used on professional pages Examples: Comic Sans, Vivaldi

Fantasy fonts are decorative in nature and are also rarely used because of poor legibility Examples: Impact, Chiller

The Font-Size Property Specifying font-size can be done

with many different units of measure For example:

<p> This font is normal sized</p> <p style=“font-size: 200%”>

This font is twice as tall</p> <p style=“font-size:12px”>

This font is 12 pixels tall</p>

Units of Measure in CSS em - Relative: font’s character height ex - Relative: height of font’s x character px - Relative: pixels of a monitor screen % - Relative: percentage values

in - Absolute: inches cm - Absolute: centimeters mm - Absolute: millimeters pt - Absolute: points pc - Absolute: picas

Pre

ferr

ed

Avoid

Th

ese

Working with Keywords Font-size can be specified using the keywords:

xx-small, x-small, small, medium, large, x-large, xx-large

Default size on most browsers is medium The keywords do not correspond to any

measurement, but are scaled in relation to one another

Keywords larger and smaller shift size of text in relation to size of parent element

Working with % and em A popular way to specify a font-size is

em measurements or % or some combination These are relative font measurements based

on the parent element’s font-size If no font-size for parent given, em and % are

based on browser’s base font size Once the em size is calculated, it can be used

for all kinds of measurements indents, margins, widths etc.

The Font-Weight Property The font-weight property modifies the

weight normal, bold, bolder, lighter 100, 200, 300, 400, 500, 600, 700, 800, 900

Most fonts common to the Web only have two weights: normal and bold

Numeric values lower than 600 are usually normal and 600 and above are usually bold

For example: p {font-weight: bold; } p { font-weight: 600;}

The Font-Style Property The font-style property affects whether

the letter shapes are vertical (normal) or slanted (italic or oblique) italic, oblique are slanted versions of a font The italic version is usually a separate typeface The oblique version uses normal font and slants

it in the browser Examples:

p { font-style: italic;} p { font-style: normal;}

The Font-Variant Property The font-variant property makes use of

the small uppercase style letters available in some typefaces

When a true small caps font is not available, the browser will scale down uppercase letters so you see them as small caps

Examples: h1 { font-variant: small-caps;} h1 { font-variant: normal;}

The Line-Height Property The line-height property defines the minimum

distance from baseline to baseline in text Baseline is the imaginary line on which bottoms

of characters sit Values include: number, length measurement,

percentage, or normal Examples:

{ line-height: 2;} (number acts as a scaling factor) { line-height: 2em;} (twice the height of an em} { line-height: 200%;} (twice the height of base font)

The Shortcut Font Property A shortcut property called font can be

used to apply many font properties at once

The font values are given in this order: {font: style weight variant

size/line-height font-family } As a minimum font values need:

{font: font-size font-family}

The Text-Decoration Property

Used to apply a decoration to text within the affected tag Values include: none, underline, over-

line, line-through, and blink Some examples:

p {text-decoration: underline;} p {text-decoration: line-through;} p {text-decoration: none;}

Cautions with Text-Decoration

The most common use of the text-decoration property is to turn off the underline under hypertext : a { text-decoration: none; } Be sure there are other clues to compensate

such as color or weight if you turn off underline on links

Adding underline to text may mistakenly lead user into thinking the text is a link

Blinking text can be annoying and amateurish. Internet Explorer does not support blink.

The Text-Indent Property The text-indent allows the first line of text

to be indented by specified amount Only the first line is indented

Values include: length measurement or percentage

Negative values can create a hanging indent Examples:

p { text-indent: 2em;} (twice size of em) p { text-indent: 25%;} (25% width page)

The Text-Transform Property

If you want to change the capitalization of text on the fly, you can apply the text-transform property

Values include: none, capitalize, lowercase, uppercase

Examples: p{ text-transform: none} (text same as typed) p{ text-transform: capitalize} (first letters capitalized) p{ text-transform: lowercase} (all letters lowercased) p{ text-transform: uppercase} (all letters

uppercased)

Letter and Word Spacing The letter-spacing property inserts space

between each letter in the text The word-spacing property inserts space

between each word in the text Values include:

length measurement and normal Examples:

p { letter-spacing: 8px;} (each letter spaced) p { word-spacing: 1.5em;} (each word spaced)

The Text-Align Property The text-align property allows you to

horizontally align text to the margin or margins of a Web page

Values include: left, right, center, justify Examples:

p{ text-align: left;} (aligns to left margin) p{ text-align: right;} (aligns to right margin) p{ text-align: center;} (centers between

margins) p{ text-align: justify;} (aligns on both margins)

Classes in CSS Sometimes you will need to create your

own user-defined style rule for use anywhere on the page.

A class style rule can be applied many times on a Web page

Begin the class style with a . character and then the name of the new class

Example: .bigger { font-size: larger; }

Applying a Class This new class allows you to group

several styles and apply them to an element or text anywhere on your page.

Use the class attribute to apply the class style rule (do not use the . with the name) Ex. <p class=“bigger”> Text inside tag

</p> Ex. <p> A paragraph of text contains many

<span class=“bigger”>words</span> inside sentences.</p>

Use IDs for Unique Styles When you want a specific style for one

element on a page, assign it to an ID. To create a rule to work with an ID, use the

# character when you define the style rule Example: # footer { font-size: small; }

To identify the footer on your page, use the id attribute: <div id=“footer” > Copyright 2008

</div>

Grouped Selectors One handy style rule short

cut is to create a style rule for more than one element type

A comma-separated list of selectors is used with the declaration block h1, h2, p, ul {font-size: small;} This single style rule has the same effect as

four separate style rules Using grouped selectors also makes

your style sheet more readable

Descendent Selectors in CSS

Descendent selectors are a kind of contextual selector they only are applied in a certain context

Descendent selectors are used to apply styles to child elements only when they are nested within a certain parent

Example: div ol { font-size: 125%; } Only applies the font-size of 125% to an <ol> child

element nested inside a <div> parent element

More on Specificity in CSS Some selectors have more weight than others

when it comes to resolving conflicting style rules: the most specific style rule wins

Order of selectors most specific -> least specific: ID selectors Class selectors Contextual Selectors (includes descendent

selectors) Individual Element Selectors

Anchor Pseudo-Classes Anchor pseudo-class allow you to define styles

for different link state changes You can determine a pseudo-class style

because it contains the : character Links exist in multiple states:

a:link – the unvisited link state a:visited – the link has been visited a:hover – the mouse is hovering over the link a:active – the link is active

Ordering Anchor Pseudo Classes

The order you place the anchor pseudo-classes in a style sheet is important a:link and a:visited – must appear before

the a:hover pseudo-class a:hover – must appear before the a:active

pseudo-class Memory clue for <a> pseudo class

order: love ha : link, visited, hover, active

Using Anchor Pseudo Classes

Using CSS you can change the color and appearance of a link in these states Ex. a: link { color: blue;}

a: active { color: red; } a: visited { color: green; } a: hover { color: yellow; }

Pseudo-classes can be combined with classes Ex. a.red:visited { color: red;}

Readability Dos Do make use of white space on a page:

this allows important elements to stand out Do use the same font-family for all headings:

just vary the size Do use relative font sizes: allows the user to

choose to increase or decrease the font size Do structure “scannable” pages: Use shorter

paragraphs, lists, headings and sub-headings

Readability Don’ts Don’t Center, bold, or italicize entire

paragraphs: this makes text harder to read Don’t change font-family or other formatting

too much on a page - “Less is more” Don’t use <br /> to force line breaks:

allow text to wrap when window is resized Don’t use underlined text:

users mistake to text for hypertext Don’t use all caps for long headings or

paragraphs: harder to read, use for short headings

Just the Beginning The main use of the ID selector is

to layout Web pages – Covered in Chapters 14, 15, and 16

Use of text and background colors – Covered more in Chapter 13

External Style Sheets- Covered in Chapters 14, 15, and 16

Lesson Summary While HTML provides many tags and

attributes for text formatting many are being deprecated (phased out)

Text formatting should be done with Cascading Style Sheets, CSS

Use inline CSS sparingly for special case formatting

Use embedded CSS for controlling text formatting of an entire Web page