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 | |||||
Yes | Yes | Yes | Yes | Yes |
Tablets / Mobile | |||||
Yes | Yes | Yes | Yes | Yes | Yes |
Last updated by CSSPortal on: 14th October 2023