How to add Custom CSS File in Magento 2

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and Javascript. And, Magento, the #1 open-source eCommerce platform, also uses CSS to customize its interface.

In this article, we will talk about “How to custom CSS in Magento 2”, which helps you to customize all the styles in Magento such as layout, font-weight, color, background, etc. It can load some files like URL, CDN, library, etc.

In Magento 2, you can include custom CSS within Module or Theme. Usually, the stylesheets you include should be available for all store pages, you will include a CSS file in layout default_head_blocks.xml or specific load style with a layout for each page.

Include CSS in Module

In this example, we will create module Magenest_CustomCss, and add a default_head_blocks.xml file in the module’s view/frontend/layout folder, For custom CSS for a specific layout, we'll start with default_head_block.xml layout. It will apply to all pages in Magento.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
	<head>
		<css src="Magenest_CustomCss::css/css-module.css"/>
	</head>
</page>

After that, add the web/css/source/less-custom.less file.

body {
    background: pink;
}

This is the result after clearing the cache by using this command: php bin/magento cache:flush

If you want custom CSS for specific layout, you need the layout of the page, which is a similar step for less file in module or theme. This is an example of catalog_product_view.xml:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      layout="2columns-left"
     xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/local.css" />
    </head>
</page>

And the result will look like the below picture:

We can go in pages with layout homepage or catalog_product_view.xml

And catalog_product_view

And finally, we will check in page has layout catalog_category_view.xml

Include CSS in Theme

The way to add CSS for Theme is similar to Module, but here there is a little bit of difference. It is the structure of the directory.

Step 1: You need to create file a css file in /app/design/frontend/<Vendor>/<Theme_Name>/web/css/local.css

Step 2: At this step, create default_head_blocks.xml file in

app/design/frontend/<Vendor>/<Theme_Name>/<Module_NameSpace>/layout/

Step 3: In default_head_blocks.xml, using css tag (<css>) to include a css file which we created at Step 2.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      layout="2columns-left"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/local.css" />
    </head>
</page>

Step 4 : And add the below code in local.css file.

body {
    background: blue;
}

Step 4: Run clear cache command in the Magento root directory.

And the result will be like this: the background has changed to the blue color: