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.

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 style.

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

Specifications