The Style Keyword: The Difference Between Tag and Attribute

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.

<head>
   <meta charset="utf-8">
   <title>The Style Keyword</title>
   <style>
   body {
      color: red;
   }
   </style>
</head>

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>
   <style scoped>
   p {
      color: red;
   }
   </style>
   <p>this sibling element is red</p>
   <div>
      <p>this cousin element is red</p>
   </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>
   <p>this is NOT red</p>
   <style scoped>
   p {
      color: red;
   }
   </style>
   <div>
      <p>this is red</p>
   </div>
   <p>this is red</p>
</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>
   <p style="color: red;">this is red</p>
</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.

Read More

Excellent Opportunity to Use The <abbr> Element

I was recently searching for the contact info of a colleague. The search results included the division in which the employee works. The listing for the second result, highlighted with a red circle, is “PLT MNTC FM.” Exactly—I don’t know what it means, either.

This was a perfect opportunity for the webmaster to use the abbreviation element (<abbr>), which is typically used with the title attribute. Browsers generally underline the content to encourage users to hover their mouse over the underlined word. A tooltip results with the contents of the title attribute. For example,

<abbr title="Blog You Soon">BYS</abbr>

BYS,
Roy