In a CSS stylesheet, your write several rules to define your presentation.
A rule set (also called “rule”) consists of:
selectorList {
property: value;
[more property:value; pairs]
}
where:
selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
The CSS rule
h1 {
color: red;
font: Consolas;
}
where:
The HTML
<h1>This text will be red with the font Consolas</h1>
The result
The property may be laid out in any order but from a reading perspective, there is properties that are more important than other.
The code guide proposes an order by type of property:
Positioning comes first because it can remove an element from the normal flow of the document and override box model related styles. The box model comes next as it dictates a component's dimensions and placement. Everything else takes place inside the component or without impacting the previous two sections, and thus they come last.
To add a rule dynamically with javascript, you can just create dynamically a style element that will then add a stylesheet
Demo:
p.steelblue { color: steelblue; }
let style = document.createElement("style");
style.innerText = `p.steelblue { color: steelblue; }`;
document.head.appendChild(style);
<p class="steelblue">A styleblue pargraph</p>