In this lesson, you'll learn a few of the more common CSS properties used to style text content and customize the fonts used in the page.
Before doing this lesson, make sure you're already familiar with the syntax of CSS, and how to use CSS in your projects. You probably also want to have the CSS Values tutorial/reference open in another tab.
CSS contains several properties that you can use to format text and text elements in your document. You can read about most of them in the MDN tutorial Fundamentals of Text and Font Styling..
Here are some quick links to the MDN documentation for the properties discussed in this part of the lesson:
The color property allows you to set the
colour of the text (or foreground) inside an element.
It takes any valid colour value.
Note that any colour settings on the foreground affect not only the
characters, but any text decoration you add to the characters, such as
underline,
strike through, etc.
You can play with the color property using
the following CodePen:
See the Pen Untitled by Wendi Jollymore (@ProfWendi) on CodePen.
Colour property Codepen (opens in the pen tab)
Text decorations are settings that enhance text, such as underlining, strike through, displaying text in title case, etc.
The text-decoration property allows you to
change the line that appears on text. It supports each of the following
values (I've added a style to teach one, so you can see what each one
does):
We often use text-decoration: none; to turn the underline off
on links when we want them to look like buttons, as demonstrated in this
codepen:
See the Pen Use-Case: text-decoration: none by Wendi Jollymore (@ProfWendi) on CodePen.
Text-decoration: none use-case Codepen (opens in the pen tab)
The text-transform property changes the text's
capitalization. The possible values are:
none assigns no transformation, or turns off any existing
transformationuppercase puts all the letters in upper-case; doesn't
affect any character that's not a letterlowercase puts all the letters in lower-case; doesn't
affect any character that's not a lettercapitalize puts the first letter of each word in the
text into upper-case (otherwise known as "Title Case"). This is
handy when you're displaying a person's name or the name of an entity.Here's a CodePen you can play with that demonstrates the uses of text-decoration and text-transform.
See the Pen CSS: Text Properties - decoration, transform by Wendi Jollymore (@ProfWendi) on CodePen.
Text-decoration and text-transformation Codepen (opens in the pen tab)
You can use the text-align property to change the
horiziontal alignment of text within its
container. Possible values include:
left will left-justify text within
its containerright will right-justify text within
its containerjustify will fully justify
text within its container (adding spacing between
words to ensure that text is horizontally lined up
on both the left and right sides)center will center text within
its containerYou can play with the text-align property in the following CodePen:
See the Pen CSS: Text Properties - Align, Colour by Wendi Jollymore (@ProfWendi) on CodePen.
text-align property Codepen (opens in the pen tab)
There are several properties that you can use to customize the word spacing, letter spacing, and line height of text. These properties can help you make the text content of a page more readable when the font is difficult to read to accommodate users with specific disabilities.
The letter-spacing
defines the amount of horizontal space between characters.
The word-spacing property defines the
amount of horizontal space between words.
Both properties take any valid length measurement, which consists of a number followed by a dimension that measures size (such as px or em). Using a positive measurement increases the amount of spacing and using a negative measurement decreases the amount of spacing.
Both properties can also accept the value normal,
which sets the property to the font's default spacing or the
user's browser (the user may have changed the browser default).
The line-height property defines the
amount of space between lines of text. This property takes a
numeric value (integer or floating point) but it can also take a
dimension that measures size
(such as px or em). For example, using line-height: 1.5
sets the line height to 1.5 times (or 150%) of the font
size , and line-height: 10px sets the line height
to exactly 10 pixels, regardless of the font size. Using the
numeric value with no units is the preferred way to use the
line-height property.
See the Pen CSS: Text Properties - indent, letter spacing, line height by Wendi Jollymore (@ProfWendi) on CodePen.
CSS also contains several properties that you can use to customize fonts. Pages without font settings will always display using the user's browser default (each browser generally allows you to set a default font and a default mono-space font). You can override those defaults by using font properties in CSS. Note however, that you shouldn't use a font that is hard to read! You don't want your users leaving your web site because they can't read it! For accessibility, stick to regular fonts (the most accessible fonts for visually impaired users are Arial and Verdana).
It's important to understand the different terms when working with fonts: many people are confused by terms like "font", "font family", and "typeface" - what do these terms mean, what's the difference? What's a glyph and why is it important?
A glyph is a representation of a single character. For example, F is the glyph for upper-case letter f, and * is the glyph for the asterisk symbol. 0 is the glyph for 0 in a monospaced font (I told the browser to use Courier or Courier New, but it might be different in your browser, it depends on your browser settings).
A lot of people will define typeface as a specific font, and that's somewhat true. A typeface is the name given to a specific style and size of a set of glyphs. For example, this part of this sentence is in the Courier New typeface, although if you configured an override of the default monospaced font in your browser, it might render in a slightly different typeface. A typeface consists of a specific glyph for each character, so you might notice that some fonts/typefaces don't support some characters: that's because the designer didn't create a glyph for that character.
A font is a file for a specific typeface in a specific style. For example, the typeface "Courier New" might be in the file called "courier.ttf". As you probably know, you can write some text in a specific typeface and then make it bold, or italic, or both bold and italic. When you type something in a word processor in the Courier New typeface and then make it bold, you're actually using a different font. The Courier New Bold font might be in a file called "courierbd.ttf".
Each style of a particular typeface is in a different file. On a computer, there would be several files for a specific typeface. For example, one file might be for Courier New with no embelishments (i.e. "regular"), one file for Courier New in bold, another one for Courier New in italics, and a third file for Courier New in both bold and italic. Therefore, the Courier New typeface has four different fonts (font files) on a standard computer.
This means that for a specific typeface, a character will have several glyphs. For example, the number 0 (zero) in regular Courier New, the 0 in Courier New bold, the 0 in Courier New italic, and the 0 in Courier New bold-italic. Each set of glyphs is stored in the font file for that typeface/style combination.
A font family is a collection of fonts for a specific typeface. So on my computer, the font family "Courier New" is made up of Courier New (the regular one with no bold/italic), Courier New Bold, Courier New Italic, and Courier New Bold Italic
In addition, CSS defines generic font families. Generic font families are collections of typefaces with specific characteristics. CSS has five different font families:
For example, the Courier New font family fits into the monospace generic font family. The Times New Roman fonts fit into the serif generic font family, and Arial font family fits into the sans-serif generic font family.
For web sites and applications, you would generally stick with serif or sans-serif fonts, and use monospace fonts for specific purposes (e.g. displaying sample code or output from code/programs, etc). Cursive and fantasy fonts are difficult to read and are not considered good for accessible web design.
Here are various CSS properties you can use to customize fonts: be sure to read the MDN documentation for each so you can learn the various values each one accepts.
See the Pen CSS: Font Properties by Wendi Jollymore (@ProfWendi) on CodePen.