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

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

Specifications

Specification Status Comment
CSS Object Model (CSSOM)
The definition of 'CSS Declaration Blocks' in that specification.
Working Draft