CSS Part 2 Text Styling

Dr. Greg Bernstein

Updated August 29, 2019

CSS Text Styling

Readings

  1. Fundamental text and Font styling.

Fonts and Such

Text Color

  • Use the color property
<section class="ColorMe">
    <p>What color am I?</p>
    <p>What about me? </p>
    <p>And this paragraph?</p>
</section>

Text Color

CSS — also using combinator and psuedo class selector.

.ColorMe p:nth-child(1) {
    color: aqua;
}
.ColorMe p:nth-child(2) {
    color: green;
}
.ColorMe p:nth-child(3) {
    color: darkred;
}

Text Color

Renders as:

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:

<section>
    <p>What font is used here?</p>
    <p>What about me? </p>
    <p>And this paragraph?</p>
    <p>Finally, what about way over here?</p>
</section>

Font Family Example

CSS:

        section p {
            font-size: larger;
        }
        section p:nth-child(1) {
            font-family: sans-serif;
        }
        section p:nth-child(2) {
            font-family: "Bauhaus 93", sans-serif;
        }
        section p:nth-child(3) {
            font-family: "Courier New", monospace;
        }
        section p:nth-child(4) {
            font-family: Goudy Old Style,Garamond,Big Caslon,Times New;
            font-weight: 900;
        }

Font Family Example

Renders as:

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>What about me? </p>
    <p>And this paragraph?</p>
    <p>Finally, what about way over here?</p>
</section>

Font Size Example

CSS:

html {
    font-size: 10px;
}
section {
    font-size: 25px;
}
section p:nth-child(2) {
    font-size: 2em;
}
section p:nth-child(3) {
    font-size: 2rem;
}
section p:nth-child(4) {
    font-size: 1rem;
}

Font Size Example

Renders as:

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.

Text Layout

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.

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!