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-1
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 document.
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.
Obsolete Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes Yes9 Yes Yes
cssRules Yes Yes Yes9 Yes Yes
ownerRule Yes Yes Yes9 Yes Yes
deleteRule Yes Yes Yes9 Yes Yes
insertRule Yes Yes Yes9 Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes Yes Yes Yes ?
cssRules Yes Yes Yes Yes Yes Yes ?
ownerRule Yes Yes Yes Yes Yes Yes ?
deleteRule Yes Yes Yes Yes Yes Yes ?
insertRule Yes Yes Yes Yes Yes Yes ?

See also

Document Tags and Contributors

Last updated by: fscholz,