How to Indent Text in HTML using CSS

Written by: Jeffrey Davis • Edited by: Simon Hill
Updated Apr 12, 2010 • Related Guides: HTML | Paragraph | CSS

Although HTML was never originally designed to support text formatting, it is still possible to apply some sort of formatting without the need for plugin-specific page formats like PDF files. In this discussion, I will explain how to use CSS formatting to indent portions of an HTML document.

Background Information

I'm sure you noticed that this text is not formatted like you would see in a word processor file, with an initial indentation marking the start of a paragraph. In fact, most HTML documents are formatted like that due to initial design specifications of the markup language. However, certain situations do call for some type of paragraph indentation so there is a need for a way to indent a paragraph in an online document without the need for document types such as PDF that require a plugin in order to view in the browser. A few tricks involving cascading style sheets (aka CSS) can do the job within a simple HTML document. Here's how to indent using HTML and CSS.

Applying the Formatting

To apply CSS formatting to indent the applicable text, simply use the text-indent property in the style definition of the target paragraph. Definitions of the formatting can be applied in one of two ways:

Paragraph-Specific: In the opening "p tag" of the paragraph to be indented, add a style definition with the property formatted as something like "text-indent: 4.0cm;". This method is best used for displaying an example of an indented paragraph rather than a block-by-block formatting due to the necessary time it takes to apply this individually to paragraphs. The result should look something like this:

<p style="text-indent: 4.0cm;">Text goes here</p>
Across-the-board style: If the formatting should be applied across a whole page then it will take less time for the task if you set a global definition for the page regarding the text to be indented, like in the following example:

<style> p { text-indent: 4.0cm; } </style>

Note that this method is best used in the header definition of the webpage, so the final result will be as follows:

<head><style> p { text-indent: 4.0cm; } </style></head>

Variations of the Methods

A mix of styles similar to the above methods can also be applied. For example, the paragraph-specific approach can be used to negate the paragraph-marking indentation style for a single paragraph in favor of the full-paragraph indentation approach commonly used for a quotation block, which can be applied more easily with the margin and/or padding properties rather than with text-indent. This particular approach can also be combined with a special definition of the "p tag" global style using a CSS formatting class-specific definition as follows:

<head><style> p.indented { text-indent: 4.0cm; } </style></head>

The definition of the "p tag" for which the class-targeted formatting needs to be applied then looks like the following:

A variation on the class-specific formatting approach can be applied by setting an identification of the "p tag" to be formatted as indented using the following style definition:

<head><style> #indentedtext { text-indent: 4.0cm; } </style></head>

The resulting "p tag" would then look something like this:

Note: The examples here only use alphabetic characters, and for good reason: most browsers (including Firefox) cannot read definitions of these types whose definitions (specifically in the "#indentedtext" and ".indented" parts) start with a numeric character in the space where the definition identifier begins (that is, the spot immediately after the "# or "." characters). As such, do not use a numeric character to start a CSS definition targeted at a class or identifier definition in the applicable portions of the definition identifier.