CSS Declaration Block

A CSS declaration block is an ordered collection of CSS properties and values. It is represented in the DOM as a CSSStyleDeclaration.

Each property and value pairing is known as a CSS declaration. The CSS declaration block has the following associated properties:

computed flag: Set if the CSSStyleDeclaration object is a computed rather than specified style. Unset by default.
declarations: The CSS declarations associated with this object.
parent CSS rule: The CSSRule that the CSS declaration block is associated with, otherwise null.
owner node: The element that the CSS declaration block is associated with, otherwise null.
updating flag: Set when the CSS declaration block is updating the owner node's style attribute.

When a CSSStyleDeclaration is returned by a CSS Object Model (CSSOM) interface these properties are set to appropriate values as defined by the specification.

Basic example

The following example shows a CSS rule with a declaration block for the h1 element. The CSS declaration block is the lines between the curly braces.

css

h1 {
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-style: italic;
  color: rebeccapurple;
}

We can return a CSSStyleDeclaration representing this CSS declaration block using CSSStyleRule.style.

let myRules = document.styleSheets[0].cssRules;
let rule = myRules[0]; // a CSSStyleRule
console.log(rule.style); // a CSSStyleDeclaration object

Specification
CSS Object Model (CSSOM) # css-declaration-blocks