CSS Portal

HTML style Global Attribute

☕
Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

Buy us a coffee
style
HTML Global AttributeThis global attribute is supported by all modern browsers.
Updated 14th October 2023

Description

The style global attribute specifies an inline CSS style for an element. It can be used on any HTML element, but it is generally considered best practice to avoid using it, unless for quick styling or testing purposes.

Inline styles can be difficult to maintain and override, and they can make your code less readable. It is generally preferred to define styles in a separate CSS file, so that they can be applied to multiple elements consistently.

To use the style attribute, simply add it to the element you want to style, and then specify the CSS properties and values you want to apply. For example, the following code would center a heading:

<h1 style="text-align: center;">This is a centered heading</h1>

You can also use the style attribute to apply multiple CSS properties to an element at once. For example, the following code would center a heading, make it red, and give it a font size of 20 pixels:

<h1 style="text-align: center; color: red; font-size: 20px;">This is a centered, red heading with a font size of 20 pixels</h1>

Note that the style attribute will override any style set globally, e.g. styles specified in the <style> tag or in an external style sheet.

Here are some things to keep in mind when using the style global attribute:

  • Use it sparingly and only for quick styling or testing purposes.
  • It is generally preferred to define styles in a separate CSS file, so that they can be applied to multiple elements consistently.
  • The style attribute will override any style set globally, e.g. styles specified in the <style> tag or in an external style sheet.

Syntax

<element style="style_definitions">

Values

  • style_definitionsList of CSS styles to be used in document.

Example

<h2 style="text-align: center; background-color: khaki; color: red; padding:20px; border: 2px solid green;"> Second level heading</h2>
Open in editor

Browser Support

The following information will show you the current browser support for the HTML style global attribute. Hover over a browser icon to see the version that first introduced support for this HTML global attribute.

This global attribute is supported by all modern browsers.

Desktop

Chrome
Edge
Firefox
Opera
Safari

Tablets & Mobile

Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-
Supported Unknown Not supported
☕
Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

Buy us a coffee