HTML style Global Attribute

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>

Browser Support

The following table will show you the current browser support for the HTML style Global Attribute.

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 14th October 2023