Paragraph Tag and Basic Styling

HTML Paragraph tag and Basic Styling Code: In HTML Paragraphs help us keep text divided into reasonable and understandable segments and pieces of data that is related. In MS word or Open Office, we find it easy to create new paragraph by hitting the “Enter” key on our keyboards. The same paragraph effect is achieved in HTML using <p> some text goes here</p>. An illustration is placed below for the purpose of clarity:

<p> My First Paragraph </p>

<p> My Second Paragraph </p>

<p> My Third Paragraph</p>

The output would be exactly as we desired i.e. first, second and third paragraphs are rendered as separate entities by the web browser:

This is the achievement of paragraphs. But just like ‘<a href= “ “> HTML Headings and other HTML tages, HTML Paragraphs can also be given style attribute to change their text colours or to align them left or right.

HTML Inlie Style: Align Text or Paragraph:

Let us align our first paragraph to right while 2^nd paragraph to left and third one to left also. The style attribute may help us in this way:

<p style=”text-align: right”> My First Paragraph </p>

<p style=”text-align: left”> My Second Paragraph </p>

<p style=”text-align: left”> My Third Paragraph</p>

 

Outcome of the above formula would be:

HTML Inline Style Paragraph background color:

Don’t our paragraphs seem boring? Let us put some colour in them with  <style= “”> or inline CSS(Cascading Style Sheets). We are going to mark our first paragraph green, second pink and last one without any colour. Remember, we are not going to colour the font, we are changing the background colour each paragraph:

 

<p style=”background-color: green”> My First Paragraph </p>

<p style=”background-color: pink”> My Second Paragraph </p>

<p> My Third Paragraph</p>

Output of the above styling:

Liked the way we taught it? Ask a question or comment in the form below to show your appreciation. We love interacting with the users of our tutorials.