• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Services
    • WordPress Websites
    • WordPress Maintenance Package
    • WordPress Security Package
    • WordPress Turbo Tune‑Up
    • For Designers & Agencies
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / CSS / CSS Text Properties

CSS Text Properties

3 October 2001 / 2 Comments

In this reference we will look at how to control text appearance using style sheets. CSS gives you precise control over typography in your Web pages, allowing you to set parameters such as the spacing between lines, words and even letters, and the alignment and indenting of text.

We’ll look at the different text properties that can be used with CSS, and explain each property with some real-world examples. Each example is displayed as it would render in your browser.

There are eight properties that can be used to control text appearance – word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, text-align, text-indent and line-height. Let’s look at each of these properties in turn.

word-spacing

This property controls the amount of space added to the default spacing between each word. The allowable values are:

Value Example
normal { word-spacing: normal; }
length { word-spacing: 5mm; }

normal will select the default word spacing.

length will add the specified value to the default word spacing. length values are specified using the CSS length units such as em, px, cm and pt. For a full description of these, see the CSS units reference.

Examples:


p { word-spacing: 1em; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.

letter-spacing

This property is similar to word-spacing, but controls the spacing added between each individual letter. Possible values are:

Value Example
normal { letter-spacing: normal; }
length { letter-spacing: 0.1mm; }

normal will select the default letter spacing.

length will add the specified value to the default letter spacing. length values are specified using the CSS length units such as em, px, cm and pt. For a full description of these, see the CSS units reference.

Examples:


p { letter-spacing: 0.1em; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.


p { letter-spacing: 0.1cm; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.

text-decoration

The text-decoration property allows you to control decorations that can be added to the text, such as strike-throughs, underlining, and (heaven forbid!) blinking. Possible values are:

Value Example
none { text-decoration: none; }
underline { text-decoration: underline; }
overline { text-decoration: overline; }
line-through { text-decoration: line-through; }
blink { text-decoration: blink; }

Examples:


p { text-decoration: underline; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.


p { text-decoration: line-through; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.

vertical-align

This property controls the vertical placement of the text. It’s similar to the valign attribute in HTML. The allowable values are:

Value Example
baseline { vertical-align: baseline; }
sub { vertical-align: sub; }
super { vertical-align: super; }
top { vertical-align: top; }
text-top { vertical-align: text-top; }
middle { vertical-align: middle; }
bottom { vertical-align: bottom; }
text-bottom { vertical-align: text-bottom; }
percentage { vertical-align: 25%; }

The following 6 values are relative to the parent element:

baseline aligns the baseline with the parent’s baseline. This is the default.

middle aligns the vertical midpoint of the element (e.g. an image) with the baseline plus half the x-height of the parent. The x-height is the height of the letter ‘x’ in the context of this line of text. See the CSS units reference for details.

sub displays the element as subscript text.

super displays the element as superscript text.

text-top aligns the top of the element with the top of the font used for the parent element.

text-bottom aligns the bottom of the element with the bottom of the font used for the parent element.

The next two values are relative to the line that the element is in, as opposed to the parent element:

top causes the top of the element to be aligned vertically with the tallest element on the line.

bottom causes the bottom of the element to be aligned vertically with the lowest element on the line.

The final value, percentage, specifies a percentage of the element’s line height (see the line-height property below). It raises or lowers the baseline by a percentage of the line-height above the baseline of the parent. For example, a value of 50% will raise the baseline to halfway between the parent’s baseline and the baseline of the line above. A value of -100% will lower the baseline to the same height as the baseline of the line below.

Examples:


span { vertical-align: super; }

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.


span { vertical-align: sub; }

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.


span { vertical-align: 100%; }

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

text-transform

text-transform controls the case of the text. You can transform all the text into capitals or lowercase, or just capitalize the first letter of each word. The options are:

Value Example
capitalize { text-transform: capitalize; }
uppercase { text-transform: uppercase; }
lowercase { text-transform: lowercase; }
none { text-transform: none; }

capitalize uppercases the first character of each word, while uppercase and lowercase transform the whole text into all upper-case or lower-case characters respectively. none removes all transformations from the text and displays it as-is.

Examples:


p { text-transform: uppercase; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.


p { text-transform: capitalize; }

`Take some more tea,’ the March Hare said to Alice, very earnestly.

text-align

This property is similar to the align attribute in HTML. Options are:

Value Example
left { text-align: left; }
right { text-align: right; }
center { text-align: center; }
justify { text-align: justify; }

left, right and center perform the same actions as their HTML counterparts. justify creates columns of text that are aligned along their left and right edges, like the text in a book.

Examples:


p { text-align: center; }

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.


p { text-align: justify; }

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

text-indent

This property allows you to indent the first line of text in a paragraph. The options are:

Value Example
length { text-indent: 3cm; }
percentage { text-indent: 5% }

A length is specified using the CSS length units such as em, px, cm and pt. For a full description of these, see the CSS units reference.

percentage is a percentage of the parent element’s width.

Examples:


p { text-indent: 5em; }

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

line-height

The final text property, line-height, controls the distance between lines of text. Possible values are:

Value Example
normal { line-height: normal; }
number { line-height: 1.5; }
length { line-height: 0.5cm; }
percentage { line-height: 125%; }

normal sets the line height to the default or inherited value, while specifying a number results in a line height of the default value multiplied by that number.

A length is specified using the CSS length units such as em, px, cm and pt. For a full description of these, see the CSS units reference.

percentage is a percentage of the element’s font size.

Examples:


p { line-height: normal; }

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.


p { line-height: 2; }

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.


p { line-height: 150%; }

The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had VERY long claws and a great many teeth, so she felt that it ought to be treated with respect.

Filed Under: CSS Tagged With: cascading style sheets, stylesheets

Reader Interactions

Comments

  1. PJ says

    16 June 2019 at 3:05 pm

    Great instruction presented in very easy to understand way. Some instruction on how to add a text label with raised word would be great. FOr example, Sale flag for category nav etc.’
    Great work

    Reply
    • Matt Doyle says

      10 July 2019 at 10:43 pm

      Thanks for the feedback. I’ll bear that in mind!

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2022 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits