Introduction
The style keyword in HTML is special, because it’s both a tag (<style>) and an attribute (<p style="color: red;">). It’s easy to confuse the two, as each represents very different ideas.
The style Tag
When used as a tag and without the scoped attribute (discussed below), it must be included as a child of the <head> element and is the primary method by which to include embedded/internal CSS in a document.
The asdfalknsdl jf;ajsdf;ljasdkljfls jfdle Keyword
When used inside the <body> element, the <style> element, a W3C-compliant HTML5 feature introduced in 2012, the scoped attribute is required.
It’s important to note that elements styled using the scoped attribute must follow the <style> element in the DOM tree; that is, the styled elements must at least be siblings (or deeper) of the <style> element.
For example:
<div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20scoped%3E%0A%20%20%20p%20%7B%0A%20%20%20%20%20%20color%3A%20red%3B%0A%20%20%20%7D%0A%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
this sibling element is red
<div>
this cousin element is red
</div>
</div>
The example above correctly styles the foreground color of the paragraphs to red.
In the following example, however, the paragraph preceeding the <style> element won’t be made red because it appears before the scoped <style> element.
<div>
this is NOT red
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20scoped%3E%0A%20%20%20p%20%7B%0A%20%20%20%20%20%20color%3A%20red%3B%0A%20%20%20%7D%0A%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<div>
this is red
</div>
this is red
</div>
The very nature of this method is to intersperse content (HTML) with presentation (CSS), but modern web development has always sought to maintain the separation of these two from each other and from behavior (JavaScript).
For larger websites controlled via a CMS, this method will likely prove to be a valid and compliant HTML5 solution, but for smaller sites not maintained via a CMS, this intermingling of languages will be confusing. Use sparingly.
The style Attribute
The style keyword may also be used as an attribute to an html element:
<div> this is red </div>
Using the style keyword in this manner, known as “inline” styling, has the highest specificity (1,0,0,0), and there are limited occasions in which to use it.
For example, it’s used extensively in HTML email, because many email clients recognize inline-ed CSS more than internal and/or external style sheets.
It’s also used as a quick way to view a local change before committing it to an internal or external style sheet. And, tools such as Google’s Chrome Developer Tools, or DevTools, rely entirely on the inline CSS model for debugging.
In all other instances, it should be avoided, since it defeats the purpose of separating content (HTML) from presentation (CSS).
Finally, note that jQuery (and other JavaScript libraries) performs a lot of on-the-fly manipulation of the DOM tree, and does so by inlining CSS.
Thanks. This is very helpful.