HTML - Style (Element|Embedded Style) - Attribute

About

Style in HTML is:

that permit to declare a style.

Type

Element

The style element 1) allows style information to be embedded in documents.

<style>
.green {
     color: green; 
     background:transparent;
}
.blue {
     color: blue; 
     background:transparent;
}
</style>
<p>My sweat suit is <span class="green">green</span> 
and my eyes are <span class="blue">blue</span>.</p>

Style Location

An style element should be inside metadata element and is usually part of the head.

Style in Body

See HTML - CSS Style in Body (FOUC)

How to create a style element with Javascript

This step by step shows you how to create dynamically a style element in the head.

  • Create a style element
const style = document.createElement('style');
  • Add the CSS rules as content
style.textContent = 'body { background-color: gray } p { color: white }';
document.querySelector('head').appendChild(style);
  • A little bit of content in the page
<p>Lorem Ipsum</p>
  • Result:

Attribute

The style content attribute is a global CSS styling attribute.

Html Style Attribute

You can set the style in the style attribute

The words that refer to colors are marked up using the span element and the style attribute.

<p>
  My sweat suit is 
  <span style="color: green; background:transparent">green</span> 
  and my eyes are 
  <span style="color: blue;background: transparent">blue</span>
</p>
<p>
  A cloned style sweat has 
  <span>this color</span>
</p>
<p>
  I may also like an object variation of 
  <span>this color</span>
</p>

Javascript Style Property

You can manipulate the style with javascript programmatically with the style property

Example:

let firstSpan = document.getElementsByTagName("span")[0];
console.log("The color of the first span is "+firstSpan.style.color);

// Inline color copy
let thirdSpan = document.getElementsByTagName("span")[2];
thirdSpan.style.cssText = firstSpan.style.cssText;

// Object notation where you can set multiple properties at once with an object
// The `minus` should be deleted and the next word should be uppercase
// Example: `background-color` becomes `backgroundColor`
let fourthSpan = document.querySelector("p:nth-child(3) span");
Object.assign(fourthSpan.style, {
  color: 'white',
  backgroundColor: 'grey'
});

Using the style attribute to hide and show content, or to convey meaning that is otherwise not included in the document, is non-conforming. (To hide and show content, use the hidden attribute.)

Documentation / Reference





Discover More
Dom Attribute Set To Color Red
Attribute manipulation with DOM

How to add, delete, get any node attribute with the DOM
CSS - Inline Style Attribute

Markup languages such as HTML and SVG provide a style attribute on most elements, to hold inline style information that applies to those elements. This draft...
CSS - Style Sheet (Script|File) - Stylesheet

A stylesheet is a list of rules that specify the presentation of a source document. The stylesheet is a combination of : the external files with the suffix css defined via the HTML link element the...
CSS - Style declaration (Inline - (External|Internal) Style sheet)

There is three ways to specify CSS rules in HTML: External style sheet with the link element Internal style sheet with the style element Inline style or inline CSS with the style attribute ...
Css - Rule (Set|Declaration)

In a CSS stylesheet, your write several rules to define your presentation. A rule set (also called “rule”) consists of: a selector list followed by a declaration block. (one of several declarations)...
HTML - CSS Style in Body (FOUC)

This article talks the Style element when it's located in the body element. It is accepted by browser but this is not the standard. The HMTL DTD does not allow it. But all browsers support it. Mainly...
HTML - Div element (no meaning)

The div element has no special meaning at all. It's a generic content. If you want to organize a text in logical unit, you should use the section element The div elements can be useful for: stylistic...
HTML - Global (Element) Attribute

The global-attributesglobal attributes are common attribute to all elements in the HTML language.
HTML - Metadata Content

Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other “out of...
HTML - Security (Secure applications)

This article is security when writing an application that shows HTML pages. HTMLHTTP security page HTML is a programming language that can download and run script. Therefore, you should be extremely...



Share this page:
Follow us:
Task Runner