{

CSS paragraph styles | html p tag CSS examples


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

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

CSS paragraph styles

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

If you paragraph contains class selector

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

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

If you paragraph contains id selector

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

In CSS, 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 CSS style as given below

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

or you can apply with 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 to left or right or center aligned.

Html contains paragraphs, each paragraph is added with 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 to 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

<style>
   p {
      color: blue;
      text-indent: 40px;
      font-weight:600;
    }
  </style>
THE BEST NEWSLETTER ANYWHERE
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
Subscribe
You'll get a notification every time a post gets published here.