Skip to content
Related Articles

Related Articles

Improve Article
CSS | @document rule
  • Last Updated : 31 Oct, 2019

The CSS @document rule is used to maintain the restriction of the styles in a page or set of pages. This rule makes the styles for specific URLs, suppose the user included 10 URLs on a page and want to styles each of them differently then this rule could be the trump card. The @document rule define the styles rule for each URLs page differently as you define.


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


  • 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.

Below examples illustrate the @Document rule:

Example 1: The styles are define in this example will applicable on mentioned URL, domain and regular expression.

regexp("https:.*") {
    body {
        background-color: brown;
        font-size: 18px;
    h1 {
        color: green;
        background: white;

Supported Browsers: The browsers supported by CSS @document rule property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safri
  • Opera
My Personal Notes arrow_drop_up
Recommended Articles
Page :