Adding CSS and JavaScript to your theme

In Drupal, CSS stylesheets and JavaScript files are associated with libraries, and specific libraries are added to a page. This allows CSS style sheets and JavaScript files to be attached only when they are needed. Themes can be associated with libraries that must always be attached for global styling.

In this recipe, we will update a theme’s libraries.yml file to register a CSS stylesheet and JavaScript file provided by the custom theme.

Getting ready

This recipe uses a theme created by the theme generator as done in the Creating a custom theme to style your Drupal site recipe.

How to do it…

1. First, create css and js directories in your theme’s directory that will contain the CSS stylesheets and JavaScript files, respectively:

   mkdir -p css js

2. In the css directory, add a styles.css file that will hold your theme’s CSS declarations. For the purpose of demonstration, add the following CSS declaration...