CSS @document rule

The CSS @document rule applies styles specifically to certain URLs, allowing different styling for different pages.

Purpose: Restricts styles to specific web pages or URLs.
Usage: Useful when multiple pages need unique styling within the same site.

Syntax:

@document url("") {
    // Style your defined URLs page
}

Functions

CSS @document supports functions like url(), url-prefix(), domain(), and regexp() to specify which pages or URLs the styles should apply to.

url(): This functions holds the URL where the styles are applicable.
url-prefix(): This functions can holds more than one URL where single styles are applicable for multiple pages.
domain(): This functions holds the domain name whichever styles with this attribute that style will applicable on all the URLs under that domain.
regexp(): This functions holds the documents using regular expression.

Note: CSS @document rule has been DEPRECATED and is no longer recommended.

html

<style> 
@document url("https://www.geeksforgeeks.org/user/skyridetim/contributions/"),
url-prefix("https://www.geeksforgeeks.org/"),
domain("html.comm"),
regexp("https:.*") {
    body {
        background-color: brown;
        font-size: 18px;
    }
    h1 {
        color: green;
        background: white;
    }
}
</style>

Purpose: The @document rule applies the specified styles only to the pages or URLs that match the url(), url-prefix(), domain(), or regexp() conditions.
Applied styles: The body’s background and font size, as well as the <h1> color and background, are customized only for the targeted pages.

Functions

Explore