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: This font is normal sized This font is twice as tall This font is 12 pixels tall

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 Preferred Avoid These

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. Text inside tag Ex. A paragraph of text contains many words inside sentences.

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: Copyright 2008

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 child element nested inside a 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 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 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