Topic
Last updated August 21, 2017

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.

Example tasks

  • 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

Confidence

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.

Drupalize.Me resources

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?

More Guides

We have guides on many Drupal skills and topics.

Explore guides

External resources