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.


Inherits properties from its parent, Stylesheet.

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.
If this style sheet is imported into the document using an @import rule, the ownerRule property will return that CSSImportRule, otherwise it returns null.


Inherits methods from its parent, Stylesheet.

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


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
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,
or SVGStyleElement
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


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

Browser compatibility

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)

See also


© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

API CSSOM Reference