HTML style Attribute

 

Definition and Usage

The style attribute is a global attribute. It specifies inline styling for an element, which will override external and internal style sheets.

There are Three Ways to Insert Style Sheet

  • External
  • Internal
  • Inline

Brief Explanation

  1. External style sheets are written in separate document, which has .css extension and cannot contains HTML tags.
  2. Internal style sheets are written in the <head> section of the current HTML document, which are defined within the <style> element.
  3. Inline style sheets are written inside any opening tag as a value of the style attribute. It’s purpose is to apply style on specific element.

Example of the style Attribute

<h3 style="background-color:lightgreen;text-align:center;width:200px;"> Inline style has been used in this header </h3>
 
<p style="color:red"> Inline style has been used in this paragraph. </p>
Result

Inline style has been used in this header

Inline style has been used in this paragraph.

 

Example Explaining

In the above example we have added the style attribute to the <h3> and <p> tags.

1 :

In the <h3> tag, we added the below values for the style attribute.

    • background-color:lightgreen; for changing the background color to lightgreen, of the <h3> element’s content.
    • text-align:center; to set the <h3> element’s content in center.
    • width:200px; to set the <h3> element width to 200 pixels.

    2 :

    In the <p> tag, we added the below values for the style attribute.

    • color:red; for changing the text colour to red.
    Next ❯

    ❮ Previous

    Here are a few tutorials for you to read next:

    If you find this tutorial helpful, then please Subscribe to our YouTube Channel for video tutorials, and share this article on social media.

    Was this post helpful?
    Let us know if you liked the post. That’s the only way we can improve.
    Yes1
    No0
    Powered by Helpful

    Leave a Comment

    Your email address will not be published. Required fields are marked *