HTML - Style (Element|Embedded Style) - Attribute
Table of Contents
About
Style in HTML is:
that permit to declare a style.
You can also load declare a style through the link element. See CSS - Style declaration (Inline - (External|Internal) Style sheet)
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
Attribute
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;
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.)