Restrict CSS styles to specific article pages

Sometimes it is necessary to change the CSS styling for specific article pages only. Using a unique ID provided with each article in your site, you can control on which pages exactly your styles apply.

You can get the unique ID for an article in your site by using your browser’s developer tools to inspect the page’s source. The page id is set right on the html element at the very top.
Example: <html ... data-page-id="ci_a3b900d63695ce79ff2846988e04e77b7b9121a9e41e0432512abc3b81e0c902">...</html>

Using data-page-id , you can restrict the scope of your code.

Example:

CSS

/* Changing the site’s header on a specific page */
:root[data-page-id="{YOUR_ID}"] {
  --theme-header-background-color: cornflowerblue;
}