What is Pargraph tag? And it’s attributes in HTML

Paragraph tag

Share This Post

Share on facebook
Share on pinterest
Share on twitter
Share on linkedin
Share on google

The HTML <p> letter defines a paragraph. A paragraph every time starts on a new line and browsers itself add some white space prior to and after a paragraph.                

<P> tag is used to add a new paragraph in a=HTML document. You can set the positioning in a straight line or parallel to something else of a paragraph by using the lineup feature. This feature can accept the valve, such as left, right, center or justify. The <P> tag is a container tag and contain other tag. A line is by default added prior to and after the content define within the <P>and </P> tags.

Example:

 <!DOCTYPE html> 

Edit Code
<html> 
<head> 
    <title>Paragraph</title> 

Run code and see out put
</head> 
<body> 

Dark mode
    <p>A Computer Science portal for geeks.</p> 
    <p>It contains extremely good written. They are very good articles.</p> 
</body> 
</html> 

When we see the webpage, we see that there are few position added prior to and after a paragraph. HTML does this by default. Let’s see the some properties of paragraph tag:

  • <p> tag automatically adds space prior to and after any paragraph, which is gap added by the browser.
  • If multiple positions are added, then the browser decreases them it to a single space.
  • If a user adds multiple lines, the browser decreases them to a single line.

This paragraph has multiple 

    lines. But HTML reduces them  to a single line, omitting the carriage return we have used.  </p> 

    <p> This paragraph      has multiple   spaces.     But HTML reduces   them  all to  single space, eliminating   the additional spaces and line   as they have used.    </p> 

</body> 

</html> 

<br> tag:
There is a way to let the HTML know where does the browser need to change the lines by the use of <br> tag. These tags are not having any closing tag. So, just a single starting tag will change the sentence.

For Example

 <p> 

    This paragraph has multiple<br>lines and sentences.  

    But HTML reduces them<br>to a single 

    line, omitting<br>the carriage return 

    we have used. 

    </p> 

</body> 

</html> 

HTML | style attribute

Styles are normally rules that explain how a document can be presented in web browser. Style information may be either attached as a alternate document or embedded in the HTML file.

The HTML styles are used to add styles to HTML element, like  color, font styles, font size, and many more.

Example

I am Red

I am Blue

I am Big

The HTML Style Attribute

To set the style of an HTML element, can be done with the style attribute.

This style attribute has the following code:

<tagname style=”property:value;“>

The property is a CSS property. The value is a CSS value.

Background Color

The CSS background-color property sets the background color .

Example

Set the background color of a page to blue:

<body style="background-color:blue;">

<h1>This is a heading title</h1>
<p>This is a paragraph.</p>

</body>

Example

Set background color for two different elements:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>

Text Color

The CSS color property explains the text color of an HTML element:

Example:

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Fonts

The CSS font-family property explains the font to be used for an HTML element:

Example:

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Text Size

The CSS font-size property explains the text size for an HTML element:

Example:

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Text Alignment

The CSS text-align property explains the horizontal text alignment for an HTML element:

Example:

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

3 ways of execute style in HTML:

  1. Inline Style: In this method, the style component is used under the HTML start tag.
  2. Embedded Style: In this method, the style part is used under the <head> element of the document.
  3. External Style Sheet: In this method the <link> part is used to link to an external CSS file.

Inline Style : In Inline styling, the CSS rules are normally written under the beginning tag using the style. The style includes a series of CSS property and value pairs. Each ‘ property : value ‘ pair is separated by a semicolon ( ; ).

Example:

<!DOCTYPE html> 
<html> 
<head> 
    
</head> 
<body> 
  
    <h1 style="color:Blue;font-size:25px;"> 
        Example of Inline Style 
    </h1> 
  
    <p style="color:red;">First paragraph</p> 
  
    <p style="color:green;font-size:40px;"> 
        Second paragraph 
    </p> 
  
    <hr style="border-color:orange;"> 
  
</body> 
  
</html>

Embedded Style : Embedded or internal style sheets only affect the file that are embedded inside. Embedded style sheets are defined in the <head> section of an HTML document using the <style> tag.

Example

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <style type="text/css"> 
        body { 
            background-color: powderblue; 
        } 
          
        h1 { 
            color: black; 
            font-family: arial; 
        } 
          
        p { 
            color: yellow; 
            font-family: verdana; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>Example of Embedded Style</h1> 
    <p>Very First paragraph.</p> 
</body> 
  
</html> 

External Style Sheet: External Style Sheets method can be used when the CSS has been applied to different web pages. An external style sheet contains all the style rules in a alternate document that you can attach from an HTML file on your site.
There are many ways of linking external style sheets –

  • Linking External Style Sheets
  • Importing External Style Sheets

Linking External Style Sheets :
In this method, an external style sheet is linked to an HTML document using the <link> tag.

Supported Browser: The browsers assisted by styles are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Digital Marketing

How to begin and originate your own online business

State, labor, property, and entrepreneurship are traditionally deemed the four significant powers of creation. Although the Internet ought revolutionized. Moreover, there is immeasurable news for

YouTube images
Digital Marketing

Why no one talks about YouTube anymore

According to the people, thoughts the golden age of youtube is completed He’s remaining on the head of his seat as his twin sibling and

Do You Want To Boost Your Business?

drop us a line and keep in touch

small_c_popup.png

Subscribe to our Newsletter