CSS - Style Sheet (Script|File) - Stylesheet

About

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

The stylesheet is a combination of :

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:

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

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:





Discover More
CSS - (Source) Document

The document to which one or more style sheets apply. Not to confound with the CSS document (style sheet) CSS is used to describe the presentation of document languages and CSS does not change the underlying...
CSS - Addessing model (through selector and properties)

CSS CSS addressing model. Selectors and properties allow style sheets to refer to the following parts of a document or user agent: Elements in the document tree and certain relationships between...
CSS - Block And Inline Layout (Block Formatting context)

CSS - Block And Inline Layout (Block Formatting context) CSS Block and inline layout is the first layout model of CSS. It's also known as: * block formatting * flow layout The component are laid...
CSS - CSS In Js

css in js is the manipulation of css rule completely with the help of javascript. The css is not in a stylesheet but in Javascript code. Css in Js is used mostly to style react components rather than...
CSS - Cascading Style Sheets - Markup Language ( HTML |XML) Skin

CSSHTML CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. CSS = Skin of HTML SVG XML World Wide Web Consortium...
CSS - How to get an inline property with Javascript (font-size)

This page will show you how to retrieve the value of a css property defined inline with the style attribute
CSS - Media Type (Screen, Paper, ) - Medium

HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use: on a screen, sans-serif fonts when displayed when printed, and...
CSS - Style declaration (Inline - (External|Internal) Style sheet)

There is three ways to specify CSS rules in HTML: External style sheet with the link element Internal style sheet with the style element Inline style or inline CSS with the style attribute ...
CSS - User Agent Style Sheet

A user agent delivers a default Style Sheet. Every browser provides a default set of styles also known as user agent styles. The provided style simply override the browser defaults to get the same...
Css - Rule (Set|Declaration)

In a CSS stylesheet, your write several rules to define your presentation. A rule set (also called “rule”) consists of: a selector list followed by a declaration block. (one of several declarations)...



Share this page:
Follow us:
Task Runner