This tutorial will guide you through the steps of adding CSS styling to a custom Drupal 10 theme.

1. Start with a Drupal 10 base theme (you’ll need to rename the theme)
2. Add a css folder to the theme’s folder

   
   # File Structure
   core
   modules
   profiles
   sites
   themes
   --contrib
   --custom
   ----d10_custom_theme_add_css
   ------css
   --------style.css
   ------d10_custom_theme_add_css.info.yml 
   ------d10_custom_theme_add_css.libraries.yml 
   

3. Add a style.css file in the css folder

   
   /**
   * @file
   * D10 custom theme global style CSS file.
   *
   * Enter any custom CSS below this comment.
   */
   
   .custom-class {
       color: fff;
   }
   

4. Add a d10_custom_theme_add_css.libraries.yml file to the theme’s folder

   
   # d10_custom_theme_add_css.libraries.yml 
   global-styling:
       css:
       theme:
           css/style.css: {}
   

5. Add the libraries: mapping scalar and sequence to the d10_custom_theme_add_css.info.yml file

   
   # d10_custom_theme_add_css.info.yml
   name: D10 Custom Theme (add css)
   type: theme
   description: 'A Drupal 10 custom theme base with custom css.'
   core_version_requirement: '^10'
   base theme: 'false'
   libraries:
       - d10_custom_theme_add_css/global-styling
   regions:
       header: 'Header'
       content: 'Content'
       sidebar_first: 'Sidebar first'
       footer: 'Footer''
   

6. Congratulations! You now have a custom theme with custom css.

More information

• Drupal: Adding assets (CSS, JS) to a Drupal theme via *.libraries.yml
• Drupal: CSS file organization
• Drupal: CSS formatting guidelines
• Drupal 10 custom theme add css repository