Search⌘ K
AI Features
Home
Courses
Web Development: Unraveling HTML, CSS, and JavaScript

Paragraphs

Explore how to style paragraphs with CSS by using line-height for spacing, text-align for alignment, and text-indent for indentation. This lesson helps you understand how these properties affect paragraph layout and presentation within web pages.

We'll cover the following...

You can style the outlook of paragraphs with the line-height, text-align, and text-indent properties, as shown in the Listing below.

Listing: Styling paragraphs

<!DOCTYPE html>
<html>
<head>
  <title>Styling paragraph</title>
  <style>
    body {
      font-family: Verdana, Arial, sans-serif;
      margin-left: 48px;
    }
    .stretched-line {
      line-height: 200%;
      text-align: right;
    }
    .condensed-line {
      line-height: 90%;
      text-align: center;
    }
    .indented-line {
      text-indent: 32px;
      text-align: justify;
    }
    .outdented-line {
      text-indent: -32px;
      text-align: justify;
    }
  </style>
</head>
<body>
  <p>
    Normal line height: Lorem ipsum dolor sit
    amet, consectetur adipiscing elit fusce vel
    sapien elit in malesuada.
  </p><hr />
  <p class="stretched-line">
    Stretched line height: Lorem ipsum dolor sit
    amet, consectetur adipiscing elit fusce vel
    sapien elit in malesuada.
  </p><hr />
  <p class="condensed-line">
    Condensed line height: Lorem ipsum dolor sit
    amet, consectetur adipiscing elit fusce vel
    sapien elit in malesuada.
  </p><hr />
  <p class="indented-line">
    Indented line: Lorem ipsum dolor sit
    amet, consectetur adipiscing elit fusce vel
    sapien elit in malesuada.
  </p><hr />
  <p class="outdented-line">
    Outdented line: Lorem ipsum dolor sit
    amet, consectetur adipiscing elit fusce vel
    sapien elit in malesuada.
  </p>
</body>
</html>

The image below demonstrates the effect of styles in this listing. ...