Magento2: How to add a Custom CSS File in Magento2

January 12, 2019

One of the most common tasks a fronted developer will How to add a Custom CSS File in Magento2

In this Tutorial you’ll learn step-by-step instruction on How to add a Custom CSS File in Magento2.

In Magento2, the Syntax to add style sheet is different, as well as the files added a different location in Magento2

If You have to add Custom css. You have to Open default_head_blocks.xml file. This File is Located in

app/design/(Your_Package)/(Your_theme)/Magento_Theme/layout

Open default_head_blocks.xml then add the CSS file in Layout Configuration.

The CSS File is Located in

app/design/(Your_Package)/(Your_theme)/web/css/custom.css

Magento2 use css Files from pub/static . Clear the Original static Files within the pub/static and run this Command

if You refresh your magento Store, You should be able to see your css file is being included in Magento Fronted.

Hope this Helps

Karan Suthar

Surat, India

I'm Karan, the creator Behind the KTechBlog. I write Blogs in my Free Time. I ❤ to learn new Technologies and Share with Others. I'm Trying best effort to make KTechBlog useful for Everyone.