web:css:stylesheet

About

A stylesheet is a list of rules that specify the presentation of a source document.

The stylesheet is a combination of :

the external files with the suffix css defined via the HTML link element
the content of the html style element
and the HTML style attribute.

The stylesheet rules are parsed during the loading of the page and transformed in the CSS Object model that is made available via the stylesheets property of the document object (There is actually more than one but conceptually, this is the process)

Properties

Source

Style sheets may have three different origins:

The priority of these sources is governed by this mechanisms:

cascading
and inheritance.

Management

Valid

A valid style sheet must be written according to the grammar

Content type

CSS style sheets that exist in separate files are sent over the Internet as a sequence of bytes accompanied by encoding information. The structure of the transmission, termed a message entity, is defined by RFC 2045 and RFC 2616.

A message entity with a content type of “text/css” represents an independent CSS document. The “text/css” content type has been registered by RFC 2318.

Declaration / Loading

Link

HTML - The link element (inter-document relationships)

<head>
   <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Style (Inline)

Inline with the style node

<style>
@import url("css/style.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css");
</style>

More see CSS - Style declaration (Inline - (External|Internal) Style sheet)

loading programmatically with Javascript

We are creating link element programatically.

const head = document.querySelector('head');
const baseCdn = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/";
const stylesheets = [
	["themes/prism-tomorrow.min.css", "sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg=="],
	["plugins/toolbar/prism-toolbar.min.css","sha512-DSAA0ziYwggOJ3QyWFZhIaU8bSwQLyfnyIrmShRLBdJMtiYKT7Ju35ujBCZ6ApK3HURt34p2xNo+KX9ebQNEPQ=="],
	/*https://prismjs.com/plugins/command-line/*/
	["plugins/command-line/prism-command-line.min.css","sha512-4Y1uID1tEWeqDdbb7452znwjRVwseCy9kK9BNA7Sv4PlMroQzYRznkoWTfRURSADM/SbfZSbv/iW5sNpzSbsYg=="],
	/*https://prismjs.com/plugins/line-numbers/*/
	["plugins/line-numbers/prism-line-numbers.min.css","sha512-cbQXwDFK7lj2Fqfkuxbo5iD1dSbLlJGXGpfTDqbggqjHJeyzx88I3rfwjS38WJag/ihH7lzuGlGHpDBymLirZQ=="]
];
stylesheets.forEach(stylesheet => {
		let link = document.createElement('link');
		link.rel="stylesheet"
		link.href=baseCdn+stylesheet[0];
		link.integrity=stylesheet[1];
		link.crossOrigin="anonymous";
		head.append(link);
	}
)

How to add a stylesheet with rules created programmatically

If you want to add dynamically new rules via javascript, just create dynamically a style element.

Demo:

The goal is to add dynamically the following rule:

p.steelblue { color: steelblue; }

The javascript that adds the below css rule dynamically

let style = document.createElement("style");
style.innerText = `p.steelblue { color: steelblue; }`;
document.head.appendChild(style);
var sheet = style.sheet;
console.log("Is sheet a CSSStylesheet ? "+(sheet instanceof CSSStyleSheet));

The HTML that should be styled

<p class="steelblue">A steelblue paragraph</p>

Output:

Rendered by WebCode

Table of Contents