How to Indent in HTML using CSS

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:

• 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:

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

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:

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:

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.