Mage Check Facebook icon Mage Check Linkedin icon

Magento How to add a CSS file from layout

$ In this tutorial we will describe how to add css file from layout in Magento.

$ We have just three steps, so let's folow them and in a couple of minutes, our Magento project will run a custom css file.

Step 1: Install Module\Extension

Install the module from initial page

Step 2: Create Layout File

Magento 1 (2007 - 2014)

File path: skin/design/frontend/MageCheck/Tutorial/layout/local.xml


Magento 2 Open Source (2014 -)

File path: app/code/MageCheck/Tutorial/view/frontend/magecheck_tutorial_index_index.xml


Step 3: Create Css File

Magento 1 (2007 - 2014)

File path: skin/design/frontend/MageCheck/Tutorial/css/custom.css


Magento 2 Open Source (2014 -)

File path: app/code/MageCheck/Tutorial/view/frontend/web/custom.css


Step 4: Flush Cache

Magento 1 (2007 - 2014)

Log in to you Magento 1 Admin panel, go to System -> Cache management and flush your magento cache.

Magento 2 Open Source (2014 -)

The last thing you have to do is to clean and flush your magento cache:

php bin/magento cache:clean

php bin/magento cache:flush

This is the simplest method to add Css file from layout in Magento!