Html – Declare CSS style outside the “HEAD” element of an “HTML” page

csshtmltemplate-enginetemplates

my use-case is the following :

I'm composing an HTML page by using parts that are valid HTML fragments but not valid pages,
like Divs; these elements are using CSS to manage their style.

I'd like to allow each fragment to be responsible for its own styling requirements and to not rely on the declarations of style-sheets in the main fragment (the one with the "HTML" tag).

So here come the question : is there any (standard) way to add some CSS styling outside the HEAD element (excluding the inline styling via the "style" attribute) ?

I guess I could use frames but I'd prefer to avoid this solution.

Thanks in advance for your help.

FINAL EDIT :

Thanks to the propositions of zzzzBov, JMC Creative and moontear, and after some testing, here is the answer :

use JavaScript to dynamically load some CSS style-sheets : HTML4/XHTML and HTML5 compliant,
embed "style" elements directly inside the fragments : non-compliant with HTML4/XHTML but seems to be broadly supported, and is HTML5 compliant.

As I must support email clients I've used the second solution which moreover is more simple.

Thanks all for your interest and participation.

Best Answer

tl;dr:

If you're not comfortable using HTML features that haven't reached a maturity level of W3C Recommendation, there isn't a standard way of adding <style> to the <body> of a page.

If you're comfortable using less mature features, HTML5.2 appears to be standardizing <style> elements to be allowed anywhere flow content is expected (i.e. the <body> and most of its elements).

If you're already using the [scoped] attribute, stop using the [scoped] attribute, as it was never standardized and is losing browser support.

History:

HTML 4.01

In HTML4.01 the style element was allowed in the <head> only. Browsers, being diligent about attempting to render what the author wants rather than what the author wrote have respected <style> elements in the <body> despite those pages technically being invalid.

HTML 5

The <style> element continued to be invalid in the <body>

HTML 5.1

In some working drafts of the HTML5.1 spec the <style> element was to allow for a [scoped] attribute, which would allow the <style> element to be used in flow content (i.e. in the <body>).

As an example of how that could have been used would be:

<!DOCTYPE html>
<title>Example of using the scoped attribute</title>
<div>
  <style scoped>
    p {
      color: darkred;
    }
  </style>
  <p>this text would be dark red</p>
</div>
<p>this text would be black</p>

Support for the scoped feature was added to Firefox in version 21 and added in Chrome behind a flag in version 20. The feature didn't receive enough support, so it was later removed from the HTML5.1 working draft.

Chrome was first to remove the feature in version 36. Firefox has since set the feature to be behind a flag in version 55.

HTML 5.2

In the July 2017 working draft of the HTML5.2 spec, support was added for the <style> element to be allowed in flow content:

Contexts in which this element can be used:

Where metadata content is expected.

In a <noscript> element that is a child of a <head> element.

In the body, where flow content is expected.

_{Emphasis mine}

At the time of writing this addition has remained in the HTML5.2 spec, which is currently at the Candidate Recommendation maturity level.

While this makes using <style> elements in the <body> still somewhat of a risk, this particular change is standardizing something that browsers have supported for many years.

Related Solutions

Html – What are valid values for the id attribute in HTML

For HTML 4, the answer is technically:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

HTML 5 is even more permissive, saying only that an id must contain at least one character and may not contain any space characters.

The id attribute is case sensitive in XHTML.

As a purely practical matter, you may want to avoid certain characters. Periods, colons and '#' have special meaning in CSS selectors, so you will have to escape those characters using a backslash in CSS or a double backslash in a selector string passed to jQuery. Think about how often you will have to escape a character in your stylesheets or code before you go crazy with periods and colons in ids.

For example, the HTML declaration <div id="first.name"></div> is valid. You can select that element in CSS as #first\.name and in jQuery like so: $('#first\\.name'). But if you forget the backslash, $('#first.name'), you will have a perfectly valid selector looking for an element with id first and also having class name. This is a bug that is easy to overlook. You might be happier in the long run choosing the id first-name (a hyphen rather than a period), instead.

You can simplify your development tasks by strictly sticking to a naming convention. For example, if you limit yourself entirely to lower-case characters and always separate words with either hyphens or underscores (but not both, pick one and never use the other), then you have an easy-to-remember pattern. You will never wonder "was it firstName or FirstName?" because you will always know that you should type first_name. Prefer camel case? Then limit yourself to that, no hyphens or underscores, and always, consistently use either upper-case or lower-case for the first character, don't mix them.

A now very obscure problem was that at least one browser, Netscape 6, incorrectly treated id attribute values as case-sensitive. That meant that if you had typed id="firstName" in your HTML (lower-case 'f') and #FirstName { color: red } in your CSS (upper-case 'F'), that buggy browser would have failed to set the element's color to red. At the time of this edit, April 2015, I hope you aren't being asked to support Netscape 6. Consider this a historical footnote.

Javascript – Retrieve the position (X,Y) of an HTML element

The correct approach is to use element.getBoundingClientRect():

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer has supported this since as long as you are likely to care about and it was finally standardized in CSSOM Views. All other browsers adopted it a long time ago.

Some browsers also return height and width properties, though this is non-standard. If you're worried about older browser compatibility, check this answer's revisions for an optimised degrading implementation.

The values returned by element.getBoundingClientRect() are relative to the viewport. If you need it relative to another element, simply subtract one rectangle from the other:

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');