Adding Custom CSS style to Magento 2 Theme

Today we will do a quick tutorial on extending a Magento 2 theme to include a custom CSS style on the frontend side.

You may browse the Frontend Developer guide from Magento 2 to learn more about theme integration.

Basically we are going to extend the Luma theme which itself extends the blank theme (default one on Magento2). The purpose of this extension here is to provide an external library : Bootstrap – so we can use the grid system (for example) into our home page layout or whatever pages.

The line to include between the head tags is :

<link rel="stylesheet" href="" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

However we might need to apply some custom styles on top of this so we will import the bootstrap style within a new css file :

 @import url('"); 

In Magento, css files are included in layout files, so we need to work on layouts :

New Layout for our CSS inclusion

If you need to apply the css file to all your project pages then there is only one file we need to create :


That file sits inside the Magento_Theme module, you may browse the directories (different modules) under vendor/magento/theme-frontend-blank and theme-frontend-luma to analyse how things are implemented.

Magento 2 - Luma Theme - XML definition

Here is the content of the file for the Blank theme :

<?xml version="1.0"?>

<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">


<css src="css/styles-m.css"/>

<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>

<css src="css/print.css" media="print"/>



To apply the file to our new theme, we need to put it under the same name inside the Theme_directory/Magento_Theme/layout/default_head_blocks.xml

I assume you’ve already created your theme along its files and directories, if not then do it now :



Now let’s add our brand new styles.css file into the theme as follow :

<?xml version="1.0"?>

<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">


<css src="css/styles.css"  />



Here is the content of the CSS file we are going to put in the ThemeDirectory/web/css location:

@import url("");

We are only importing the Bootstrap library from MaxCDN here, but you may add any type of styles, beware of the classes you employ as you are extending 2 themes already.

The important thing is to respect the directory structure, your style sheet must be located within the web directory of your theme, you may also name it using the .less extension.

Updating your Magento Application

In order to launch the website with the changes, the recommended way is to be in developer mode so you just need to refresh the page and you will see, in case you are in production or default mode, switch mode or clean up the cache :

$ bin/./magento cache:clean

If that isn’t enough depending on your mode, you may need to issue the following :

$ rm -Rf /pub/static/frontend/*

Then issue the command :

$ php bin/magento setup:static-content:deploy us_US –theme=Yourname/yourtheme

If you still can’t see the changes, then one way is to apply a default theme as Luma and then apply again your new theme.

Anyway if you have a few changes to make, I highly recommend to get yourself into developer mode, you can switch back to production at any time. In case you are having difficulties about the developer mode, you can read the article on How to fix the speed of your Magento 2 site.

That was simple and quick ! So what’s next ? For now you can play a little bit on your new Magento 2 theme and apply different css styles to a page. If you have any question, hit me up !

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Want more information?

Related links will be displayed within articles for you to pick up another good spot to get more details about software development, deployment & monitoring.

Stay tuned by following us on Youtube.

%d bloggers like this: