CSS · Lesson 3

Text

Making your words clear and neat

Most of a web page is words. A few text properties are enough to make those words clear, neat and easy to read.

What you'll learn

  • How to change the color of text.
  • How to line text up and change its letters to capitals.
  • How to space letters out, add or remove lines, and give text a shadow.

Let's style some words

In HTML, you choose the words. In CSS, you choose how those words look: their color, where each line sits, and small touches like capitals, spacing, lines and shadows. These are called text properties.

Think of a tarpaulin sign for a store's grand opening. The words are already decided, like the HTML. The sign maker picks the ink color, centers each line, prints the title in capital letters, spreads the letters apart so people can read them from far away, adds a shadow so the title pops, and crosses out the old price.

Every line on the sign is centered with text-align. The title gets three properties at once: capitals, wide spacing and a shadow.

A closer look

Text color is just color

The property for text color is color, not font-color or text-color. You can use the same color names, hex codes and rgb() values from CSS Lesson 1. Text color is passed down: set color on body, and every heading and paragraph inside takes that color, unless another rule gives it a different one. This is called inheritance.

Lining up text

text-align lines up the text inside a box: left, center, right or justify. It works on boxes that hold lines of text, like headings and paragraphs. A link sits inside a line, so to center a link, center the line it sits in.

Lines on text

text-decoration adds a line: underline (below), line-through (through the middle) or overline (above). Links are underlined by the browser, and text-decoration: none; removes that line. If you remove the underline, keep links easy to spot with a different color.

Capital letters without retyping

text-transform changes only how the letters look: uppercase, lowercase or capitalize (first letter of each word). The HTML keeps the words exactly as you typed them, so you can change the style later without retyping anything.

Letter spacing

letter-spacing adds space between letters, like 2px. Short labels in capital letters often look better with a little extra space. A negative value, like -1px, pulls letters closer.

Text shadows

text-shadow takes up to four parts: how far right, how far down, how blurry, and the color. 2px 2px 0 #FFD043 is a sharp yellow shadow down and to the right. Use shadows lightly, mostly on big titles. On small text, a shadow can make words harder to read.

Let's build it

Let's style the words on the Front Page Bytes home page: the site name, a tagline, a story and a link. Each code box opens on the CSS tab with the new lines highlighted. Click HTML to see the page being styled.

Choose text colors

Your code 
body {  background-color: #F0F7FF;  color: #3A414C;}h1 {  color: #1E6FA0;}
What you see

color: #3A414C; on body makes all the text a soft dark gray. The h1 rule then gives the site name its own blue. The h1 rule wins because it points at the heading directly.

Center the title and tagline

Your code 
body {  background-color: #F0F7FF;  color: #3A414C;}h1 {  color: #1E6FA0;  text-align: center;}.tagline {  text-align: center;}
What you see

text-align: center; moves the lines of the site name and the tagline to the middle. The story below stays on the left, because its rules don't change.

Make the tagline capitals

Your code 
body {  background-color: #F0F7FF;  color: #3A414C;}h1 {  color: #1E6FA0;  text-align: center;}.tagline {  text-align: center;  text-transform: uppercase;}
What you see

text-transform: uppercase; shows the tagline in capital letters. Open the HTML tab: the words there are still written normally.

Spread the letters apart

Your code 
body {  background-color: #F0F7FF;  color: #3A414C;}h1 {  color: #1E6FA0;  text-align: center;}.tagline {  text-align: center;  text-transform: uppercase;  letter-spacing: 2px;}
What you see

letter-spacing: 2px; adds 2 pixels between every letter. Capital letters close together can feel crowded, and a little space makes them easier to read.

Restyle the link

Your code 
body {  background-color: #F0F7FF;  color: #3A414C;}h1 {  color: #1E6FA0;  text-align: center;}.tagline {  text-align: center;  text-transform: uppercase;  letter-spacing: 2px;}a {  color: #1E6FA0;  text-decoration: none;}
What you see

text-decoration: none; removes the link's underline, and color makes it the same blue as the title. The blue still shows people that it's something to click.

Add a shadow to the title

Your code 
body {  background-color: #F0F7FF;  color: #3A414C;}h1 {  color: #1E6FA0;  text-align: center;  text-shadow: 2px 2px 0 #FFD043;}.tagline {  text-align: center;  text-transform: uppercase;  letter-spacing: 2px;}a {  color: #1E6FA0;  text-decoration: none;}
What you see

text-shadow: 2px 2px 0 #FFD043; puts a sharp yellow copy of the title 2 pixels right and 2 pixels down. The 0 means no blur, which gives a bold cartoon look.

Quick notes

color Text color 
h1 { color: #1E6FA0; }

How to use

  • skyblue A color name.
  • #1E6FA0 A hex code for an exact shade.
  • rgb(30, 111, 160) Red, green and blue, each from 0 to 255.
  • Set it on body, and all the text inside takes the same color unless another rule changes it.

Examples

  1. Soft dark text for the whole page.

    body {  color: #3A414C;}

  2. A blue heading.

    h1 {  color: #1E6FA0;}

  3. Red text for a warning.

    .warning {  color: #FF4B4B;}
text-align Where the lines sit 
h1 { text-align: center; }

How to use

  • left Lines start at the left edge. This is the usual setting.
  • center Lines sit in the middle.
  • right Lines end at the right edge.
  • justify Lines stretch to touch both edges, like a newspaper column.

Examples

  1. A centered page title.

    h1 {  text-align: center;}

  2. A date on the right side.

    .date {  text-align: right;}

  3. Neat edges on a long story.

    .story {  text-align: justify;}
text-decoration Lines on text 
a { text-decoration: none; }

How to use

  • underline A line under the text.
  • line-through A line through the middle, like a crossed-out price.
  • overline A line above the text.
  • none No line. Often used to remove the underline from links.

Examples

  1. Links without an underline.

    a {  text-decoration: none;}

  2. A crossed-out old price.

    .old-price {  text-decoration: line-through;}

  3. Underline a word that is not a link.

    .key-word {  text-decoration: underline;}
text-transform Capital or small letters 
.tagline { text-transform: uppercase; }

How to use

  • uppercase ALL CAPITAL LETTERS.
  • lowercase all small letters.
  • capitalize The First Letter Of Each Word.
  • Only the look changes. The words in the HTML stay as you typed them.

Examples

  1. A short label in capital letters.

    .label {  text-transform: uppercase;}

  2. Names written with capital first letters.

    .name {  text-transform: capitalize;}
letter-spacing Space between letters 
.tagline { letter-spacing: 2px; }

How to use

  • 2px Adds 2 pixels between every letter.
  • 0.1em Space that grows with the text size.
  • -1px Pulls letters closer together.
  • normal The usual spacing.

Examples

  1. A spaced-out tagline in capitals.

    .tagline {  text-transform: uppercase;  letter-spacing: 2px;}

  2. A big title with letters a bit closer.

    h1 {  letter-spacing: -1px;}
text-shadow A shadow behind text 
h1 { text-shadow: 2px 2px 0 #FFD043; }

How to use

  • 2px 2px 0 #FFD043 Right, down, blur, color.
  • 0 0 8px gold No shift, only blur: a soft glow.
  • 2px 2px 0 red, 4px 4px 0 blue Several shadows, split by commas.
  • none No shadow.

Examples

  1. A cartoon-style title with a solid shadow.

    h1 {  text-shadow: 2px 2px 0 #FFD043;}

  2. A glowing title on a dark page.

    h1 {  color: white;  text-shadow: 0 0 8px gold;}

  3. A soft shadow that helps text stand out on a photo.

    .banner h1 {  text-shadow: 1px 1px 4px black;}

Common mistakes

These are mistakes many beginners make. Each mini browser shows what really happens.

Writing text-align: middle

The mistake 
body {  background-color: #F0F7FF;  color: #3A414C;}h1 {  color: #1E6FA0;  text-align: middle;}
What you see

middle isn't a value of text-align, so the browser skips the whole line and the title stays on the left.

Tip: Use center: text-align: center;

Writing font-color

The mistake 
body {  background-color: #F0F7FF;}h1 {  font-color: #1E6FA0;}
What you see

There is no property called font-color. The browser skips it, so the title keeps the usual black.

Tip: The property is simply color: color: #1E6FA0;

Centering a link by itself

The mistake 
body {  background-color: #F0F7FF;  color: #3A414C;}a {  text-align: center;}
What you see

A link sits inside a line of text, and text-align only lines up the lines inside a box. Setting it on the link itself changes nothing, so the link stays on the left.

Tip: Put text-align: center; on the box that holds the line, like the body or a paragraph around the link.

Test your knowledge

Edit the CSS on the left. Open the HTML tab to see the class names you can use. The mini browser updates as you type, and each goal gets a check mark when it's done.

No clicking needed. Each goal gets a check mark by itself once your code does it.

  1. Center the .title heading.
  2. Show the .title heading in capital letters.
  3. Change the color of the .note text.
  4. Give the .title heading a text shadow.
  5. Remove the underline from the link.
Your code
What you see
Try an exercise

Recap

  • color sets the text color. Set it on body and the text inside takes it too.
  • text-align lines up the lines inside a box, and text-transform changes letters to capitals or small letters without retyping.
  • letter-spacing spaces letters out, text-decoration adds or removes lines, and text-shadow puts a shadow behind text.

References

Lesson content prepared by the WebCore F.E. team for beginner learners. The following references were used in preparing this lesson.

  • W3C. CSS Text Module Level 3 (official specification). Open reference
  • W3C. CSS Text Decoration Module Level 3 (official specification). Open reference
  • W3C. CSS Color Module Level 4 (official specification). Open reference
  • LibreTexts. Web Site Design (2022, open textbook). Open reference