How to load a CSS file on a specific page, not on the entire site

Question

I have a CSS library that I need to load on a particular page because loading on unnecessary pages reduces the performance of my site. I know to load it for all pages like.

global-styling: css: theme: css/style.css: {}

But I want to know how to load this on a particular page. where to add and how to call it on the required page.
css/gall.css: {}

Answer 1

Here is an example in (your_custom_sub_theme.libraries.yml)

global-styling:
  css:
    component:
      css/my-custom.css: { weight: 220 }
      css/my-custom2.css: { weight: 221 }
      css/my-custom3.css: { weight: 222 }

  js:  
    js/my-custom.js: {}
    js/my-custom2.js: {}

Do NOT change the indents.

(the weight is optional)

In your_custom_sub_theme.info.yml you need:

# Defines libraries group in which we can add css/js.
libraries:
  - your_custom_sub_theme/global-styling