Magento How to add 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: Create Layout File

Magento 1

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


<?xml version='1.0'>

<layout>
    <default>
        <reference name='head'>
            <action method='addCss”>
                <type>skin_css</type>
                <file>css/custom.css</file>
            </action>
        </reference>
    </default>
</layout>

Magento 2

File path: app/code/MageCheck/Seasons/view/frontend/ magecheck_seasons_index_index.xml


<?xml version='1.0'?>

<page xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' layout='1column' xsi:noNamespaceSchemaLocation='../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd'>
    <head>
        <css src='MageCheck_Seasons::custom.css'/>
    </head>
    <referenceBlock name='content'>
        <block template='content.phtml' class='MageCheck\Seasons\Block\Main' name='magecheck_seasons_block_main' />
    </referenceBlock>
</page>

Step 2: Create Css File

Magento 1

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


body
{
    background-color:#f00;
}

Magento 2

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


body
{
    background-color:#f00;
}

Step 3: Flush Cache

Magento 1

Magento 2

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!