Topic

CSS in Drupal

  
Last updated December 22, 2017
ThemingModule DevelopmentDrupal 8

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?

Theming, Drupal 8
More information

In Drupal 8, CSS and JavaScript are loaded bundled together as asset libraries, and then these libraries are loaded via either themes or modules. Asset libraries can contain one or more CSS assets, one or more JS assets and one or more JS settings. 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

Theming, Drupal 8
More information

New asset libraries can be defined by either modules or themes. In order to define a new asset library you need to create the requisite CSS and JavaScript files, and a new THEMENAME.libraries.yml, or MODULENAME.libraries.yml file that aggregates them together and provides metadata about the library itself and any dependencies.

In this tutorial we'll:

Attach a Library

Theming, Drupal 8
More information

Libraries can be attached to all pages, a subset of pages, or to elements in a render array. This allows you to have some assets that are global, and others that are only loaded on an as-needed basis.

In this tutorial, we'll look at attaching asset libraries:

Classes and Attributes in Twig Templates

Theming, Drupal 8
More information

Theme developers often need to add or remove classes and other attributes from an HTML tag. Template files handle this with a special attributes object that contains the attributes and their values, as well as a handful of powerful methods to help manage these attributes.

In this tutorial we'll cover:

HTML and CSS

Site Building, Theming, Module Development, Drupal 8, Drupal 7, Drupal 6
More information

HTML and CSS are the foundational languages for how browsers display web pages.

More Guides

We have guides on many Drupal skills and topics.

Explore guides

External resources