HTML - style Attribute

HTML style attribute contains a CSS styling declaration and is used to apply it to an element.

This is a global attribute, and it is recommended to define styles in a separate files. The style attribute and the <style> element have the same purpose, to allow quick styling.

If the style attribute is used inside any element for styling, you can call it inline CSS.

Syntax

<element style="property:value;">

Applies on

Since style is a global attribute, it applies to all the elements, though it may have no effect on some elements(Tags placed inside of head element).

Examples of HTML style Attribute

Bellow examples will illustrate the HTML style attribute, where and how we should use this attribute!

Inline styling using style Attribute

In the following example we have create two elements h1 and p and applied styling on both of them.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML style attribute</title>
</head>

<body>
   <!-- Example of style attribute-->
   <h1>
       <span style="color: green;">Tutorials</span>point
   </h1>
   <p style="margin-top: -20px; margin-left: 100px">
       Simply Easy Learning
   </p>
</body>

</html>

Overriding internal CSS using style attribute

Internal css is the most prioritize css, if we applied CSS on any element and use style attribute on that element to change the style, it will prioritize the inline css.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML style attribute</title>
   <style>
       span{
           color: black;
       }
   </style>
</head>

<body>
   <!-- Example of style attribute-->
   <h1>
       <span style="color: green;">Tutorials</span>point
   </h1>
   <p style="margin-top: -20px; margin-left: 100px">
       Simply Easy Learning
   </p>
</body>

</html>

Override style attribute value

As you have seen in the previous example that inline CSS is the most prioritize CSS that browsers follow. But if we use !important as color: black !important; then we can override style attribute value.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML style attribute</title>
   <style>
       span{
           color: black !important;
       }
   </style>
</head>

<body>
   <!-- Example of style attribute-->
   <h1>
       <span style="color: green;">Tutorials</span>point
   </h1>
   <p style="margin-top: -20px; margin-left: 100px">
       Simply Easy Learning
   </p>
</body>

</html>

Supported Browsers

Attribute
style	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm