CSSStyleSheet

The CSSStyleSheet interface represents a single CSS style sheet. It inherits properties and methods from its parent, StyleSheet.

A style sheet consists of rules, such as style rules ("h1,h2 { font-size: 16pt }"), various at-rules (@import, @media, ...), etc. This interface lets you inspect and modify the list of rules in the stylesheet.

See the Notes section for the various ways a CSSStyleSheet object can be obtained.

Properties

Inherits properties from its parent, Stylesheet.

CSSStyleSheet.cssRules: Returns a live CSSRuleList, listing the CSSRule objects in the style sheet.
This is normally used to access individual rules like this:
styleSheet.cssRules[i] // where i = 0..cssRules.length
To add or remove items in cssRules, use the CSSStyleSheet's deleteRule() and insertRule() methods, described below.
CSSStyleSheet.ownerRule: If this style sheet is imported into the document using an @import rule, the ownerRule property will return that CSSImportRule, otherwise it returns null.

Methods

Inherits methods from its parent, Stylesheet.

CSSStyleSheet.deleteRule: Deletes a rule at the specified position from the style sheet.
CSSStyleSheet.insertRule: Inserts a new rule at the specified position in the style sheet, given the textual representation of the rule.

Notes

In some browsers, if a stylesheet is loaded from a different domain, calling cssRules results in SecurityError.

A stylesheet is associated with at most one Document, which it applies to (unless disabled). A list of CSSStyleSheet objects for a given document can be obtained using the document.styleSheets property. A specific style sheet can also be accessed from its owner object (Node or CSSImportRule), if any.

A CSSStyleSheet object is created and inserted into the document's styleSheets list automatically by the browser, when a style sheet is loaded for a document. As the document.styleSheets list cannot be modified directly, there's no useful way to create a new CSSStyleSheet object manually (although Constructable Stylesheet Objects might get added to the Web APIs at some point). To create a new stylesheet, insert a <style> or <link> element into the document.

A (possibly incomplete) list of ways a style sheet can be associated with a document follows:

Reason for the style sheet to be associated with the document	Appears in `document. styleSheets` list	Getting the owner element/rule given the style sheet object	The interface for the owner object	Getting the CSSStyleSheet object from the owner
`<style>` and `<link>` elements in the document	Yes	`.ownerNode`	`HTMLLinkElement`, `HTMLStyleElement`, or `SVGStyleElement`	`.sheet`
CSS `@import` rule in other style sheets applied to the document	Yes	`.ownerRule`	`CSSImportRule`	`.styleSheet`
`<?xml-stylesheet ?>` processing instruction in the (non-HTML) document	Yes	`.ownerNode`	`ProcessingInstruction`	`.sheet`
HTTP Link Header	Yes	N/A	N/A	N/A
User agent (default) style sheets	No	N/A	N/A	N/A

Specifications

Specification	Status	Comment
CSS Object Model (CSSOM) The definition of 'CSSStyleSheet' in that specification.	Working Draft
Document Object Model (DOM) Level 2 Style Specification The definition of 'CSSStyleSheet' in that specification.	Recommendation	Initial definition

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)	(Yes)	9.0	(Yes)	(Yes)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)