FORMATTING TEXT WITH STYLESHTML5 & CSS Visual Quickstart Guide

Chapter 10

Notes on Past Work• Copying and pasting from web pages, Word documents,

PowerPoints, etc. can be dangerous!• First, it’s plagiarism, kinda• Second, if apostrophes or quotation marks are used, they could

cause problems in your code• Should never have “smart” or “curly” quotation marks or apostrophes in

your HTML! These will break your code!

• Third, if you copy and paste all of the code I provide, you don’t really learn the tags and attributes yourself (this is psychology stuff, but trust me on this one.)

Why format with CSS?• HTML very limited in text formatting• CSS offers many more options

• Font face• Font size• Foreground & Background Colors• Spacing• Alignment• Special Effects

Choosing a Font Family• Font-family: name

• Name is the first choice of font• Surround multi-word font names with quotation marks (single or

double)• The font-family property is inherited

• Example:• h1, h2 {font-family: “Arial Black”}• p {font-family: ‘Palatino Linotype’}

Specifying Alternate Fonts• Visitors will only see a font if they have that font on their

computer• Should specify alternate, common fonts if the font you are

using does not come on both Mac and Windows• To specify an alternate font, type font-family:name,

name2, where name2 is your second font choice.• Example:

• h1, h2 {font-family: “Arial Black”, sans-serif}• p {font-family: ‘Palatino Linotype’, Palatino, serif

Creating Italics• Some HTML elements are automatically italicized

• cite, em, I• Don’t need to italicize these in your CSS!

• font-style: italic or font-style: oblique• Italic version of a font is usually created by the font designer.• Oblique version is created by the computer, by slanting the letters on

the fly• If there is no italic style available of your font, the browser should

automatically try to display the text as oblique

• font-style: normal to remove italics• Inherited style• Example:

• p {font-family: “Palatino Linotype”, Palatino, serif}• .emph {font-style: italic}

Applying Bold Formatting• Headings (h1, h2, etc.) are automatically bold• font-weight: bold for an average bold weight• font-weight: bolder or font-weight: lighter to use a

value relative to current weight• Can also type a multiple of 100 between 100-900

• 400 is normal or book weight• 700 represents bold

• Inherited style• Examples:

• p {font-family: “Palatino Linotype”, Palatino, serif}• .emph {font-style: italic; font-weight:bold}

Setting the Font size• Specific font size:

• font-size: 16px• font-size: 1em• font-size: xx-small

• No space between number and unit• Average pixel is about 1/80th of an inch high• If you set font size with pixels, visitors using Internet

Explorer may not be able to make the text bigger or smaller with their Text Size option

• Inherited style• Example:

• h1 {font-family: “Arial Black”, sans-erif; font-size: 22px; font-weight: normal}

More on Font Sizes• Can also set size dependent on parent element’s size

• h1 {font-size 1.37em}• Will cause all h1 elements to be 1.37 ems, 37% larger than default font

size

• h2 {font-size: 125%}• Will cause all h2 elements to be 125% of the default font size, or 25%

larger

• An em is equal to the size of the font. 1 em equals 100%.• Ems and percentages are well supported in current

browsers

Setting the Line Height• This refers to a paragraph’s leading, or the amount of space

between each line in a paragraph. A large line height can sometimes make your body text easier to read. A small line height for multiple-line headers makes them look classier

• line-height: n, where n is a number that will be multiplied by the element’s font size

• line-height: p%, where p% is a percentage of the font size• line-height: a, where a is an absolute value in pixels, points,

etc.• Example:

• p {font-family: “Palatino Linotype”, Palatino, serif; line-height: 170%}

Setting All Font Values at Once• Do this using the font attribute

• If desired, set font style using normal, oblique, or italic• If desired, set font weight with normal, bold, bolder, lighter, or a

multiple of 100 (up to 900)• If desired, type normal or small-caps to remove or set small caps• Type desired font size• If desired, type /line-height where line-height is the amount of

space there should be between lines.• Type a space followed by the desired font family or families• First three properties may be specified in any order or omitted

• Example:• p {font: 87% /170% “Palatino Linotype”, Palatino, serif}

Setting the Color• color: colorname• color: #rrggbb• color: rgb(r, g, b)• color: rbg(r%, g%, b%)• Can use the color property for any HTML element, not just

text• Inherited property• Example:

• h1, h2 {font: 1.37em “Arial Black”, sans-serif; color: navy}

Changing the Text’s Background• This is not the background of the entire page! This will

only change the background of the specified element• background:transparent or background:color• If you wish to use an image, type url(image.gif)• If desired, type repeat to tile the image horizontally and

vertically. repeat-x will tile horizontally, repeat-y will tile vertically. no-repeat indicates no tiling of the image

• fixed or scroll determines whether the background should scroll along with the canvas

• Example:• #toc {font-size: 75%; background:#EBC6F9}

Controlling Spacing• Tracking refers to space between words

• word-spacing: length

• Kerning refers to space between letters• letter-spacing: length

• Can use negative values, but display always depends on browser’s capabilities

• Word and letter spacing values can also be affected by your choice of alignment

• A value of normal or 0 sets letter and word spacing to defaults• Example:

• h1, h2 {font: 1.37em “Arial Black”, sans-serif; color:navy; letter-spacing:0.4em}• Puts an extra 0.4em of space between letters

Adding Indents• To add indents in your paragraphs, use text-indent:

length• Positive value creates a typical paragraph indent• Negative value creates a hanging indent. Might need to

increase padding or margins around a text box to accommodate the overhanging text

• Example:• p {font: 87% /170% “Palatino Linotype”, Palatino, serif; color:#909;

text-indent: 1.5em

Setting White Space Properties• By default, multiple spaces and returns in an HTML

document are either displayed as a single space or ignored altogether

• To force the browser to display those extra spaces:• white-space: pre to display all spaces and returns• white-space: nowrap to treat all spaces as non-breaking

• Example:• #toc {font-size: 75%; background:#EBC6F9; white-space: nowrap}

Aligning Text• Use text-align property, followed by left, right, center, or

justify• left: aligns text to the left• right: aligns text to the right• center: centers text in the middle of the screen• justify: aligns text on both the right and the left

• Example:• h1, h2 {font: 1.37em “Arial Black”, sans-serif; color:navy; letter-

spacing:0.4em; text-align:center}

Changing the Text Case• Use text-transform property

• capitalize puts first character in uppercase• uppercase puts all characters in uppercase• lowercase puts all characters in lower case• none leaves the text as is

• Example:• h1 {text-transform: uppercase}

Using Small Caps• Many (but not all) fonts have a small caps variant.

Uppercase versions of the letters are proportionately reduced to small caps size

• Utilize this with font-variant property• If browser doesn’t have a small caps variant, it might:

• Fake small caps by reducing the size of uppercase letters (making them look squat)

• Forget small caps altogether and display everything in uppercase• Choose the next font in the list to see if it has a small caps design

(in theory)

• Example:• h2 {font-size: 1em; font-variant: small-caps}

Decorating Text• You can adorn your text with underlines, overlining, lines

through the text, and even (God forbid) blinking text• To decorate text:

• Type text-decoration:• To underline, type underline• Other choices include overline, line-through, blink, none

• Example:• a:link {font-weight:bold; color:#74269D; text-decoration:none}

• This removes the underlining from your hyperlink!