Cascading Style Sheets (CSS) can be included in a Drupal site in various ways. Whether you want to include CSS files from a custom theme or an external library, you will need to understand the concept of asset libraries and how to use them to include CSS for your Drupal site. To add HTML attributes such as classes or IDs, you will need to know some Twig.
- Add CSS files from a theme or module to a Drupal site
- Add an external CSS library, such as a font or icon library, to a Drupal site
- Add static or dynamic attributes and classes in a Twig template file
Drupal 8 introduces new concepts and methods for adding CSS to Drupal. These methods are now established and not likely to change, although tips and tricks may emerge as Drupal 8 adoption increases over time.
Learn what libraries are, how to define them, and how to attach an asset library. Use these concepts and skills to add CSS to your Drupal 8 site.
- What Are Libraries?
- In this tutorial we'll cover what asset libraries are, what they contain, and the problem that they are trying to solve.
- Define an Asset Library
- Define a new asset library in either a module or a theme.
- Attach a Library
- Attach asset libraries, so the associated CSS is loaded, in various different ways depending on your use case.
- Classes and Attributes in Twig Templates
- Add or remove classes and attributes from HTML tags in a Twig template.
- HTML and CSS topic
- You want to learn HTML and CSS, or maybe you just need a refresher on the current state of web technology--where should you start?