Basic Paragraph

This is the simplest form of using the <p> tag:

<p>This is a simple paragraph.</p>

Paragraphs with Inline Styling

You can apply CSS directly to a paragraph using the style attribute:

<p style="color:blue;">This paragraph text is blue.</p>
<p style="font-size:20px;">This paragraph text has a font size of 20px.</p>

Paragraphs with CSS Class

By assigning a CSS class to a paragraph, you can apply styles defined in a <style> tag or an external stylesheet:

<style>
  .myClass {
    color: green;
    font-size: 18px;
  }
</style>

<p class="myClass">This paragraph is styled with a CSS class.</p>

Paragraphs with Id

Assigning an ID to a paragraph allows you to target it specifically with JavaScript or CSS:

<style>
  #myId {
    background-color: lightgrey;
    padding: 10px;
  }
</style>

<p id="myId">This paragraph is styled using an ID.</p>

Nested Paragraphs

While nesting <p> tags directly inside each other is not valid HTML, you can nest a paragraph within other block-level elements like <div>:

<div>
  <p>This is a paragraph inside a div.</p>
</div>

Paragraphs with Anchors

You can include hyperlinks within paragraphs using the <a> tag:

<p>Visit <a href="https://example.com">Example</a> for more information.</p>

Paragraphs with Line Breaks

To include a line break within a paragraph, use the <br> tag:

<p>This is a paragraph with a line break.<br>Now the text continues on a new line.</p>

Alignment

You can align paragraphs using the text-align style:

<p style="text-align:center;">This paragraph is centered.</p>
<p style="text-align:right;">This paragraph is aligned to the right.</p>
<p style="text-align:left;">This paragraph is aligned to the left.</p>