Adding a stylesheet to your Drupal theme

Create a folder called “css” in your theme folder. Then save a file called style.css inside that folder. Add a simple style in that file. I’m going to start with this:

body {margin: 0; background-color: #f7f7f7; color: #333; font-family: sans-serif; font-size: 1em; line-height: 1.5em;}

Save your style.css and upload the whole css folder into your theme on the server.

Now you need to add the following to your .info.yml file (the indent must be two spaces – do not use tabs):

libraries:
  - cmfirsttheme/global-styling

The whole file should now look like this (remember to change “Your Theme” and “yourtheme”:

name: Your Theme
type: theme
description: 'A very simple theme for a simple but attractive responsive Drupal website'
core_version_requirement: ^8 || ^9
base theme: false

libraries:
  - yourtheme/global-styling

You then also need to create a new file called yourtheme.libraries.yml and put this in it (once again all indents must be two spaces):

global-styling:
  css:
    theme:
      css/style.css: {}

Upload your edited .info.yml file and your new .libraries.yml file into the root of your theme on the server. Also upload your whole css folder.

Now you need to clear your cache in Drupal. Go to Configuration and then under “Development” click on “Performance”. You will see a big “Clear all caches” button. Click that and then wait a few seconds for Drupal to do its thing.

Now if you visit your site you should see your styles applied. If you don’t try clearing the cache of your browser as well.

It’s useful to keep the “Clear all caches” button in a separate tab as you will be using it every time you want to see the effects of any changes you’ve made to your stylesheet.

Next we need to think about what regions we will need in our theme.