Restrict CSS styles to specific article pages

Sometimes it is necessary to change the CSS styling for specific article pages only. Using the Confluence page ID, you can control on which pages exactly your styles apply.

You can get the Confluence page ID using one of the following methods:

Navigate to the desired page inside Confluence and copy the id from the URL
Example URL: /pages/123456789/My+page+title
Use 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-vp-page-id="123456789">...</html>

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

Example:

CSS

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