---
title: "CSSStyleSheet | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Interface CSSStyleSheet

The **`CSSStyleSheet`** interface represents a single CSS stylesheet, and lets you inspect and modify the list of rules contained in the stylesheet. It inherits properties and methods from its parent, StyleSheet.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSStyleSheet)

interface CSSStyleSheet {  
    [cssRules](#cssrules): [CSSRuleList](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSRuleList/);  
    [disabled](#disabled): boolean;  
    [href](#href): string | null;  
    [ownerNode](#ownernode): [Element](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Element/) | [ProcessingInstruction](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ProcessingInstruction/) | null;  
    [ownerRule](#ownerrule): [CSSRule](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSRule/) | null;  
    [parentStyleSheet](#parentstylesheet): CSSStyleSheet | null;  
    [rules](#rules): [CSSRuleList](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSRuleList/);  
    [title](#title): string | null;  
    [type](#type): string;  
    get [media](#mediamedia)(): [MediaList](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MediaList/);  
    set [media](#mediamedia-1)(mediaText: string): void;  
    [addRule](#addrule-1)(selector?: string, style?: string, index?: number): number;  
    [deleteRule](#deleterule-1)(index: number): void;  
    [insertRule](#insertrule-1)(rule: string, index?: number): number;  
    [removeRule](#removerule-1)(index?: number): void;  
    [replace](#replace-1)(text: string): Promise<CSSStyleSheet\>;  
    [replaceSync](#replacesync-1)(text: string): void;  
}

#### Hierarchy ([View Summary](https://docs.maptiler.com/sdk-js/api-reference/hierarchy/#Externals.CSSStyleSheet))

-   [StyleSheet](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.StyleSheet/)
    -   CSSStyleSheet

##### Index

### Properties[](#properties)

[cssRules](#cssrules) [disabled](#disabled) [href](#href) [ownerNode](#ownernode) [ownerRule](#ownerrule) [parentStyleSheet](#parentstylesheet) [rules](#rules) [title](#title) [type](#type)

### Accessors[](#accessors)

[media](#media)

### Methods[](#methods)

[addRule](#addrule) [deleteRule](#deleterule) [insertRule](#insertrule) [removeRule](#removerule) [replace](#replace) [replaceSync](#replacesync)

## Properties[](#properties-1)

### `Readonly`cssRules[](#cssrules)

cssRules: [CSSRuleList](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSRuleList/)

The read-only CSSStyleSheet property **`cssRules`** returns a live CSSRuleList which provides a real-time, up-to-date list of every CSS rule which comprises the stylesheet. Each item in the list is a CSSRule defining a single rule.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSStyleSheet/cssRules)

### disabled[](#disabled)

disabled: boolean

The **`disabled`** property of the StyleSheet interface determines whether the style sheet is prevented from applying to the document.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/StyleSheet/disabled)

Inherited from [StyleSheet](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.StyleSheet/).[disabled](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.StyleSheet/#disabled)

### `Readonly`href[](#href)

href: string | null

The **`href`** property of the StyleSheet interface returns the location of the style sheet.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/StyleSheet/href)

Inherited from [StyleSheet](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.StyleSheet/).[href](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.StyleSheet/#href)

### `Readonly`ownerNode[](#ownernode)

ownerNode: [Element](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Element/) | [ProcessingInstruction](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ProcessingInstruction/) | null

The **`ownerNode`** property of the StyleSheet interface returns the node that associates this style sheet with the document.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/StyleSheet/ownerNode)

Inherited from [StyleSheet](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.StyleSheet/).[ownerNode](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.StyleSheet/#ownernode)

### `Readonly`ownerRule[](#ownerrule)

ownerRule: [CSSRule](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSRule/) | null

### `Readonly`parentStyleSheet[](#parentstylesheet)

parentStyleSheet: CSSStyleSheet | null

The **`parentStyleSheet`** property of the StyleSheet interface returns the style sheet, if any, that is including the given style sheet.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/StyleSheet/parentStyleSheet)

Inherited from [StyleSheet](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.StyleSheet/).[parentStyleSheet](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.StyleSheet/#parentstylesheet)

### `Readonly`rules[](#rules)

rules: [CSSRuleList](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSRuleList/)

**`rules`** is a deprecated legacy property of the CSSStyleSheet interface. Functionally identical to the preferred cssRules property, it provides access to a live-updating list of the CSS rules comprising the stylesheet.

#### Deprecated[](#deprecated)

[MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSStyleSheet/rules)

### `Readonly`title[](#title)

title: string | null

The **`title`** property of the StyleSheet interface returns the advisory title of the current style sheet.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/StyleSheet/title)

Inherited from [StyleSheet](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.StyleSheet/).[title](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.StyleSheet/#title)

### `Readonly`type[](#type)

type: string

The **`type`** property of the StyleSheet interface specifies the style sheet language for the given style sheet.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/StyleSheet/type)

Inherited from [StyleSheet](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.StyleSheet/).[type](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.StyleSheet/#type)

## Accessors[](#accessors-1)

### media[](#media)

-   get media(): [MediaList](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MediaList/)
    
    The read-only **`media`** property of the StyleSheet interface contains a MediaList object representing the intended destination media for style information.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/StyleSheet/media)
    
    #### Returns [MediaList](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MediaList/)
    
    Inherited from StyleSheet.media
    
-   set media(mediaText: string): void
    
    #### Parameters
    
    -   mediaText: string
    
    #### Returns void
    
    Inherited from StyleSheet.media
    

## Methods[](#methods-1)

### addRule[](#addrule)

-   addRule(selector?: string, style?: string, index?: number): number[](#addrule-1)
    
    The obsolete CSSStyleSheet interface's **`addRule()`** legacy method adds a new rule to the stylesheet. You should avoid using this method, and should instead use the more standard insertRule() method.
    
    #### Parameters
    
    -   `Optional`selector: string
    -   `Optional`style: string
    -   `Optional`index: number
    
    #### Returns number
    
    #### Deprecated[](#deprecated-1)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSStyleSheet/addRule)
    

### deleteRule[](#deleterule)

-   deleteRule(index: number): void[](#deleterule-1)
    
    The CSSStyleSheet method **`deleteRule()`** removes a rule from the stylesheet object.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSStyleSheet/deleteRule)
    
    #### Parameters
    
    -   index: number
    
    #### Returns void
    

### insertRule[](#insertrule)

-   insertRule(rule: string, index?: number): number[](#insertrule-1)
    
    The **`CSSStyleSheet.insertRule()`** method inserts a new CSS rule into the current style sheet.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSStyleSheet/insertRule)
    
    #### Parameters
    
    -   rule: string
    -   `Optional`index: number
    
    #### Returns number
    

### removeRule[](#removerule)

-   removeRule(index?: number): void[](#removerule-1)
    
    The obsolete CSSStyleSheet method **`removeRule()`** removes a rule from the stylesheet object. It is functionally identical to the standard, preferred method deleteRule().
    
    #### Parameters
    
    -   `Optional`index: number
    
    #### Returns void
    
    #### Deprecated[](#deprecated-2)
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSStyleSheet/removeRule)
    

### replace[](#replace)

-   replace(text: string): Promise<CSSStyleSheet\>[](#replace-1)
    
    The **`replace()`** method of the CSSStyleSheet interface asynchronously replaces the content of the stylesheet with the content passed into it. The method returns a promise that resolves with the CSSStyleSheet object.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSStyleSheet/replace)
    
    #### Parameters
    
    -   text: string
    
    #### Returns Promise<CSSStyleSheet\>
    

### replaceSync[](#replacesync)

-   replaceSync(text: string): void[](#replacesync-1)
    
    The **`replaceSync()`** method of the CSSStyleSheet interface synchronously replaces the content of the stylesheet with the content passed into it.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSStyleSheet/replaceSync)
    
    #### Parameters
    
    -   text: string
    
    #### Returns void