CSS paragraph styles

This tutorial shows you multiple CSS styles added to a paragraph in HTML.

A paragraph is a block of text content like a section in a textbook.

In Webpages, Paragraphs are created using an HTML p tag or div tag.

p tag uses semantically for text content in an HTML web page.

Let’s create a paragraph in html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Hendrerit dolor magna
      eget est lorem ipsum dolor sit amet. Mattis enim ut tellus elementum
      sagittis.
    </p>
  </body>
</html>

paragraph styles are applied with element or class or id selector Following is a code to apply color styles using the element selector

<style>
  p {
    color: blue;
  }
</style>

If your paragraph contains a class selector

<p class="myparagraph">paragraph1</p>

In CSS, a dot(.) selector with a name is used to apply styles.

<style>
  .myparagraph {
    color: blue;
  }
</style>

If your paragraph contains an id selector

<p id="paraId">paragraph2</p>

In CSS, the hash(#) selector with name is used to apply styles.

<style>
  #paraId {
    color: blue;
  }
</style>

How to apply CSS styles to multiple paragraphs in HTML

Suppose you have multiple paragraphs in a HTML

<p class="para1">Paragraph1</p>
<p class="para2">Paragraph2</p>

You can apply the CSS style as given below

p.para1 {
  color: green;
}
p.para2 {
  color: red;
}

or you can apply with a class selector

.para1 {
  color: green;
}
.para2 {
  color: red;
}

How to add left align text content in a paragraph?

Sometimes, We want to apply paragraph styles left or right, or center aligned.

Html contains paragraphs, each paragraph is added with the class to apply multiple styles to each paragraph.

<p class="para1">Paragraph1</p>
<p class="para2">Paragraph2</p>

Use attribute text-align: left|right|center|justify values in CSS.

.para1 {
  color: green;
  text-align: left;
}

.para2 {
  color: red;
  text-align: right;
}

plus symbol selector in paragraph styles in HTML CSS

Sometimes, We have multiple paragraphs and you want to apply CSS styles to paragraphs except for the first paragraph.

CSS + selector used to select adjacent siblings

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>

In CSS, p+p used to select the second, third and fourth parameters and apply styles

<style>
  p + p {
    color: red;
    text-align: justify;
  }
</style>

paragraph italic and bold CSS styles

In CSS, font-style:italic makes text italic and font-weight makes font bold

<style>
  p {
    color: blue;
    font-style: italic;
    font-weight: 600;
  }
</style>

How to text-indent the start of every paragraph in CSS?

When you have a paragraph with multiple lines of text, the first line is indent or space with default space.

You can use text-indent

<style>
   p {
      color: blue;
      text-indent: 40px;
      font-weight:600;
    }
  </style>

CSS paragraph styles | HTML p tag CSS examples