Learning Objectives

• Be able to change the color and size of text

• Understand how fonts work on the web and be able to change fonts and create a “font stack”

• Be able to style, weight, transform, and decorate text.

Readings

1. Fundamental text and Font styling.

Text Color Example (HTML)

Differentiating elements of the same type by class

<section>
    <p class="first">What color am I?</p>
    <p class="second">What about me? </p>
    <p class="third">And this paragraph?</p>
</section>

Text Color Example (CSS)

Using the color property and class selectors.

<style>
.first {color: aqua;}
.second {color: green:}
.third {color: darkred;}
</style>

Text Color Example (rendered)

Renders as:

Poll Question: Fonts

Experience with fonts…

Font Family

• To set a different font on your text, you use the font-family property
• specify a font (or list of fonts) for the browser to apply to the selected elements.
• The browser will only apply a font if it is available on the machine the website is being accessed on

Font “Stack”

When a list of fonts is given the browser will try each name font in order to see if it is available on the system.

Font Family Example (HTML)

Using id attribute to distinguish the paragraphs.

<section>
    <p id="Font1">What font is used here?</p>
    <p id="Font2">What about me? </p>
    <p id="Font3">And this paragraph?</p>
    <p id="Font4">Finally, what about way over here?</p>
</section>

Font Family Example (CSS)

Using tag and id selectors.

section {
    font-size: larger;
}
#Font1 {
    font-family: sans-serif;
}
#Font2 {
    font-family: "Bauhaus 93", sans-serif;
}
#Font3 {
    font-family: "Courier New", monospace;
}
#Font4 {
    font-family: Goudy Old Style,Garamond,Big Caslon,Times New;
    font-weight: 900;
}

Font Family Example (rendered)

Web Safe Fonts?

• Default font names: serif, sans-serif, monospace, cursive, and fantasy
• What fonts can you use with confidence? It changes…
• See CSS Font Stack for font stacks for fonts that look similar across systems.

Font Size Units – px

px (pixels): The number of pixels high you want the text to be. This is an absolute unit

Font Size Units – em

1em is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter M contained inside the parent element.)

Font Size Units – rem

rems: These work just like ems, except that 1rem is equal to the font size set on the root element of the document (i.e. < html >), not the parent element.

Font Size Example (HTML)

<section>
    <p >What font size is used here?</p>
    <p class="P2">What about me? </p>
    <p class="P3">And this paragraph?</p>
    <p class="P4">Finally, what about way over here?</p>
</section>

Font Size Example (CSS)

html {font-size: 10px;}
section {font-size: 25px;}

.P2 {font-size: 2em;}
.P3 {font-size: 2rem;}
.P4 {font-size: 1rem;}

Font Size Example (rendered)

font-style

Used to turn italic text on and off.

• normal: Sets text to normal font (turns existing italics off.)
• italic: Sets text to use the italic version of the font if available
• oblique: Sets text to use a simulated version of an italic font, created by slanting the normal version

font-weight

Sets how bold the text is.

• normal, bold: Normal and bold font weight
• lighter, bolder: Sets the current element’s boldness to be one step lighter or heavier than its parent element’s boldness.
• 100–900: Numeric boldness values that provide finer grained control than the above keywords, if needed.

text-transform

Allows you to set your font to be transformed. Values include:

• none: Prevents any transformation.
• uppercase: Transforms all text to capitals.
• lowercase: Transforms all text to lower case.
• capitalize: Transforms all words to have the first letter capitalized.
• full-width: Transforms all glyphs to be written inside a fixed-width square, similar to a monospace font

text-decoration

Sets/unsets text decorations on fonts. Available values are:

• none: Unsets any text decorations already present.
• underline: Underlines the text.
• overline: Gives the text an overline.
• line-through: Puts a strikethrough over the text.

Get Hands On

You’re going to help me create examples of:

• font-style, font-weight
• text-transform, text-decoration

Text Alignment

The text-align property is used to control how text is aligned within its containing content box. The available values are as follows:

• left: Left justifies the text.
• right: Right justifies the text.
• center: Centers the text.
• justify: Makes the text spread out, varying the gaps in between the words so that all lines of text are the same width.

Getting Hands On

• Is this property inherited? How would you find out?
• Help me create examples illustrating the different values and inheritance.

Line height

The line-height property sets the height of each line of text — this can take most length and size units, but can also take a unitless value, which acts as a multiplier and is generally considered the best option.

p {line-height: 2;} /* Double spaced */

Letter and word spacing

The letter-spacing and word-spacing properties allow you to set the spacing between letters and words in your text. You won’t use these very often, but might find use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most length and size units.

Even more available

See the readings and references for more ways to style text!