HTMLElement: style property

The read-only style property of the HTMLElement returns the inline style of an element in the form of a live CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned only for the attributes that are defined in the element’s inline style attribute.

Shorthand properties are expanded. If you set style=»border-top: 1px solid black» , the longhand properties ( border-top-color , border-top-style , and border-top-width ) are set instead.

This property is read-only, meaning it is not possible to assign a CSSStyleDeclaration object to it. Nevertheless, it is possible to set an inline style by assigning a string directly to the style property. In this case the string is forwarded to CSSStyleDeclaration.cssText . Using style in this manner will completely overwrite all inline styles on the element.

Therefore, to add specific styles to an element without altering other style values, it is generally preferable to set individual properties on the CSSStyleDeclaration object. For example, you can write element.style.backgroundColor = «red» .

A style declaration is reset by setting it to null or an empty string, e.g., elt.style.color = null .

Note: CSS property names are converted to JavaScript identifier with these rules:

• If the property is made of one word, it remains as it is: height stays as is (in lowercase).
• If the property is made of several words, separated by dashes, the dashes are removed and it is converted to camelCase: background-attachment becomes backgroundAttachment .
• The property float , being a reserved JavaScript keyword, is converted to cssFloat .

The style property has the same priority in the CSS cascade as an inline style declaration set via the style attribute.

Value

Examples

Getting style information

The following code snippet demonstrates how the values obtained using the element’s style property relates to the style set on the HTML attribute:

doctype html> html lang="en-US"> body style="font-weight:bold"> div style="border-top: 1px solid blue; color:red" id="elt"> An example div div> pre id="out">pre> body> html> 

const element = document.getElementById("elt"); const out = document.getElementById("out"); const elementStyle = element.style; // We loop through all styles (for…of doesn't work with CSStyleDeclaration) for (const prop in elementStyle)  if (Object.hasOwn(elementStyle, prop))  out.textContent += `$ elementStyle[prop] > = '$elementStyle.getPropertyValue(elementStyle[prop])>'\n`; > > 

Note font-weight is not listed as a value for elementStyle as it is not defined within the style attribute of the element itself. Rather, it is inherited from the definition on its parent. Also note that the shorthand border-top property, defined in the style attribute, is not listed directly. Rather, it is replaced by the three corresponding longhand properties ( border-top-color , border-top-style , and border-top-width ).

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Example

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

The property is a CSS property. The value is a CSS value.

You will learn more about CSS later in this tutorial.

Background Color

The CSS background-color property defines the background color for an HTML element.

Example

Set the background color for a page to powderblue:

This is a heading

This is a paragraph.

Example

Set background color for two different elements:

This is a heading

This is a paragraph.

Text Color

The CSS color property defines the text color for an HTML element:

Example

This is a heading

This is a paragraph.

Fonts

The CSS font-family property defines the font to be used for an HTML element:

Example

This is a heading

This is a paragraph.

Text Size

The CSS font-size property defines the text size for an HTML element:

Example

This is a heading

This is a paragraph.

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

Example

Centered Heading

Centered paragraph.

Chapter Summary

• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment

HTML Exercises

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

: The Style Information element

The HTML element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the element.

Try it

If you include multiple and elements in your document, they will be applied to the DOM in the order they are included in the document — make sure you include them in the correct order, to avoid unexpected cascade issues.

In the same manner as elements, elements can include media attributes that contain media queries, allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width.

Attributes

This element includes the global attributes.

This attribute defines which media the style should be applied to. Its value is a media query, which defaults to all if the attribute is missing.

A cryptographic nonce (number used once) used to allow inline styles in a style-src Content-Security-Policy. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource’s policy is otherwise trivial.

This attribute specifies alternative style sheet sets.

This attribute explicitly indicates that certain operations should be blocked on the fetching of critical subresources. @import -ed stylesheets are generally considered as critical subresources, whereas background-image and fonts are not.

Deprecated attributes

This attribute should not be provided: if it is, the only permitted values are the empty string or a case-insensitive match for text/css .

Examples

A simple stylesheet

In the following example, we apply a very simple stylesheet to a document:

doctype html> html lang="en-US"> head> meta charset="UTF-8" /> title>Test pagetitle> style> p  color: red; > style> head> body> p>This is my paragraph.p> body> html> 

Result

Multiple style elements

In this example we’ve included two elements — notice how the conflicting declarations in the later element override those in the earlier one, if they have equal specificity.

doctype html> html lang="en-US"> head> meta charset="UTF-8" /> title>Test pagetitle> style> p  color: white; background-color: blue; padding: 5px; border: 1px solid black; > style> style> p  color: blue; background-color: yellow; > style> head> body> p>This is my paragraph.p> body> html> 

Result

Including a media query

In this example we build on the previous one, including a media attribute on the second element so it is only applied when the viewport is less than 500px in width.

doctype html> html lang="en-US"> head> meta charset="UTF-8" /> title>Test pagetitle> style> p  color: white; background-color: blue; padding: 5px; border: 1px solid black; > style> style media="all and (max-width: 500px)"> p  color: blue; background-color: yellow; > style> head> body> p>This is my paragraph.p> body> html> 

Result

Technical summary

Content categories	Metadata content, and if the scoped attribute is present: flow content.
Permitted content	Text content matching the type attribute, that is text/css .
Tag omission	Neither tag is omissible.
Permitted parents	Any element that accepts metadata content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	No role permitted
DOM interface	HTMLStyleElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник