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


Browser compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
Basic support Yes Yes Yes 9 Yes Yes
cssRules Yes Yes Yes 9 Yes Yes
ownerRule Yes Yes Yes 9 Yes Yes
deleteRule Yes Yes Yes 9 Yes Yes
insertRule Yes Yes Yes 9 Yes Yes
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung 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

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.