Pin Me

How to Indent Text in HTML using CSS

written by: Jeffrey Davis•edited by: Simon Hill•updated: 4/12/2010

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.

  • slide 1 of 3

    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.

  • slide 2 of 3

    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>
  • slide 3 of 3

    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:

    <p class="indented">Text goes here</p>

    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:

    <p id="indentedtext">Text goes here</p>

    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.