Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to correctly load a stylesheet within the body?

I know I can just put the <link> tag in the body and apparently it works, but I know it's not "valid" html and I want to avoid issues with strict browsers like firefox, which ignore every behavior a web designer expects if it's not defined in the official specification.

So is there some official way to load a stylesheet in the body area of the html?

like image 767
thelolcat Avatar asked Nov 23 '14 16:11

thelolcat


People also ask

Can you load a stylesheet in the body?

For example, the stylesheet link type is body-ok, and therefore <link rel="stylesheet"> is permitted in the body. However, this isn't a good practice to follow; it makes more sense to separate your <link> elements from your body content, putting them in the <head> .

What is the correct way to include a stylesheet?

To make a style sheet preferred, set the rel attribute to "stylesheet" and name the style sheet with the title attribute. To specify an alternate style sheet, set the rel attribute to "alternate stylesheet" and name the style sheet with the title attribute.

What are the three ways of inserting a stylesheet?

There are three ways of inserting a style sheet: External CSS. Internal CSS. Inline CSS.

What is the correct way to include a stylesheet named style CSS in the head of your document?

The <style> element must be included inside the <head> of the document. In general, it is better to put your styles in external stylesheets and apply them using <link> elements.


1 Answers

You can add your css in the head dynamically as well like below:

jsCode:

var head = document.getElementsByTagName("head")[0],
    cssLink = document.createElement("link");

cssLink.href = "path/to/filenam.css";
cssLink.id="dynamic-css";
cssLink.media="screen";
cssLink.type="text/css";

head.appendChild(cssLink);
like image 175
Ashish Panchal Avatar answered Oct 15 '22 10:10

Ashish Panchal