CSS paragraph styles | HTML p tag CSS examples

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

  <meta charset="UTF-8">

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


CSS paragraph styles

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

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.

If your paragraph contains an id selector

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

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

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


or you can apply with a class selector


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

paragraph italic and bold CSS styles

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

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

   p {
      color: blue;
      text-indent: 40px;
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.