Web Development: Unraveling HTML, CSS, and JavaScript/

...

/

Paragraphs

Paragraphs

In this lesson, we will study how to set paragraph styles in CSS. Let's begin!

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. ...