HTML - Style (Element|Embedded Style) - Attribute

Style in HTML is:

• an element
• and/of an attribute

that permit to declare a style.

The style element ¹⁾ 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>

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

See HTML - CSS Style in Body (FOUC)

The style content attribute is a global CSS styling attribute.

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

• Html example:

<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>My sweat style was <span>this color</span>

• Javascript

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;

• the style attribute
• Element style not allowed as child of element div in this context
• style tag should be allowed in body)