You are currently viewing Which Attribute is Used to Define Inline Styles in HTML
  • Post category:HTML

Which Attribute is Used to Define Inline Styles in HTML

Which HTML Attribute is Used to Define Inline Styles

This article is about which attribute is used to define inline styles in HTML.

How do we apply styles to HTML elements?

There are three different ways of placing or applying styles in our documents. They are:

  •  Inline style
  • Embedded style
  • External style

In this article, I am going to discuss inline styles only.

What is inline style?

Styles that are declared or placed within the tag itself are called inline styles. We use the “style” attribute is used to define inline styles. Value to style attribute is CSS declaration list, which means a collection of style rules separated by semicolon.

Syntax of inline style?

<tagname style="declaration list"> content..</tagname>

Here we have a syntax for applying the inline style. First, you need to create your HTML tag and write your content inside it. Then we use the Style attribute and inside the double quotation, we give value as a declaration list. Declaration list means collection of CSS property and property value separated by semicolon. You can use style attributes in any paired or container HTML element.

Example of inline style

<p style="color:white; background-color:black;font-size:14px">Welcome to CSS</p>

Output:

which html attribute is used to define inline styles

If you want to apply many styles to paragraph elements then what do we do?
First, we create a <p> tag then we use the style attribute. Then put is equal to (=) as in the above example code. In the double quotation, we need to declare different styles separated with semicolons.

Note: Inline styles get applied only to that specific tag in which they are declared. And If any property is inheritable in that declaration list then that property/ style will get applied/inherited to its successor tag too.

READ ALSO  The Best Way to Use HTML Inline and Block elements

Limitations of inline styles:

If we have many tags and all of them have the same/ common styles, then we have to copy-paste that entire declaration list to every other tag. That increase that webpage size. To overcome this limitation we use embedded styles or external styles.

For example :

<p style="color:white; width: 30%; background-color:black;
font-size:14px">Welcome to CSS</p>
<p style="color:white; width: 30%; background-color:black;
font-size:14px">Welcome to CSS</p>
<p style="color:white; width: 30%; background-color:black;
font-size:14px">Welcome to CSS</p>

Output:

which html attribute is used to define inline styles
In the above code, all the <p> tag has the same styles, so it increases your webpage size. So, you can use group selectors in embedded or external styles.

Conclusion

So with this article, I hope you know what is inline style and what is the right attribute for it

Leave a Reply