HTML - style Attribute

Quiz

Introduction to <style> Tag

The 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 separate files. The style attribute and the <style> element serve the same purpose, allowing for quick styling.

If the style attribute is used within any element for styling, it is referred to as inline CSS>

Syntax

Following is the syntax of <style> tag −

<element style="property:value;">

Example: Inline Styling

In the following example, we create two elements, <h1> and <p>, and apply styling to both. This HTML code creates a webpage with styled text, using the <style> attribute to apply inline CSS for color and margins.

<!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>

Example: Overriding Internal CSS

Internal CSS has the highest priority. If we apply CSS to an element and use the <style> attribute to change the style, it will prioritize the inline CSS. This HTML code creates a webpage with styled text, using the style attribute for inline CSS and style for global 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>

Example: Override <style> Attribute

As seen in the previous example, inline CSS has the highest priority in browsers. However, using !important as color: black !important; can override the style attribute value. This HTML code creates a webpage with styled text, using the style attribute for inline CSS.

<!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

Print Page