HTML style Attribute
The HTML style global attribute applies CSS declarations directly to an individual HTML element. It can contain one or more CSS property and value pairs that control the presentation of that element.
Elements That Use the style Attribute
The style attribute is a global attribute and can be specified on all HTML elements.
style Attribute Value
The value of the style attribute contains CSS declarations. Each declaration consists of a CSS property followed by a colon and its value.
<p style="color: blue;">This text is blue.</p>Multiple CSS declarations can be placed in the same style attribute and are separated by semicolons.
Using a Single CSS Property
A style attribute can contain a single CSS declaration when only one presentation property needs to be applied.
<p style="font-size: 20px;">This paragraph uses a 20-pixel font size.</p>In this example, the font-size CSS property applies directly to the paragraph.
Using Multiple CSS Properties
Several CSS declarations can be applied to the same element by placing them inside one style attribute.
<p style="color: blue; font-size: 20px; font-weight: bold;">
Styled paragraph
</p>Each declaration is separated by a semicolon. Adding a semicolon after the final declaration is also a common and useful practice.
Inline CSS
CSS written in a style attribute is commonly called inline CSS because the declarations are written directly on the HTML element.
<h2 style="color: green;">Heading</h2>Inline CSS can be useful for demonstrations, testing, rapid prototyping, or an unusual one-time style. For styles that are reused across multiple elements or pages, a style sheet is generally easier to maintain.
The CSS Cascade
Declarations in a style attribute participate in the CSS cascade. Inline declarations normally have greater specificity than declarations applied through ordinary author style rules, although other parts of the cascade, including importance and origin, can affect which declaration wins.
<p style="color: red;">This paragraph has an inline color declaration.</p>The style attribute does not create a separate kind of styling language. Its value is parsed as CSS declarations and follows the applicable CSS rules.
Accessibility and Meaning
A document that uses style attributes should remain understandable and usable if those styles are unavailable. Important meaning should not depend only on presentation such as color, size, or visibility.
Do not use the style attribute as the only way to communicate information. For example, changing text to red does not by itself explain that the text represents an error.
The HTML standard also advises against using style to hide and show content when the content's hidden state has meaning. Use the appropriate HTML feature, such as the hidden attribute, when it represents the content's state.
Common Mistakes
Do not write CSS rules with selectors inside the style attribute. The attribute contains CSS declarations for the element itself, not a complete style sheet.
Do not separate multiple CSS declarations with commas. Use semicolons between declarations.
Do not confuse the style attribute with the <style> element. The attribute applies declarations directly to one element, while the <style> element contains a CSS style sheet.
Avoid repeating the same inline styles across many elements when a reusable CSS rule would make the page easier to maintain.
Do not rely on inline styling alone to communicate important meaning or changes in the state of content.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
The style global attribute is widely supported in current core browsers. Individual CSS properties and values used within the attribute can have their own browser compatibility requirements.
Checking Browser Support
For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.
Try the style Attribute
The example uses the style attribute to apply color, font size, background color, padding, and other CSS properties directly to individual HTML elements.
Summary
The HTML style global attribute applies CSS declarations directly to an HTML element. Its value can contain one or more CSS property and value pairs separated by semicolons. Inline styles participate in the CSS cascade and can be useful for demonstrations or individual styling needs, while reusable styles are generally easier to manage with CSS rules in a style sheet.