This document discusses various CSS text formatting options including font families, styles, sizes, colors, spacing, alignment, and decoration. It provides examples for setting font styles like italic, bold, and small caps. It also covers formatting text properties such as line height, letter spacing, background colors, indentation, and alignment.

1. FORMATTING TEXT
WITH STYLES
HTML5 & CSS Visual Quickstart Guide
Chapter 10

2. 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.)

3. 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

4. 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‟}

5. 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

6. 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}

7. 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}

8. 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}

9. 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

10. 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%}

11. 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}

12. 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}

13. 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}

14. 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

15. 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

16. 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}

17. 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}

18. 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}

19. 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}

20. 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!