Add custom css

  • Step 1: Go to your magento 2.1 root directory.

Xampp ->htdocs -> magento2

Your root folder show like this

  • Step 1: After that we will go on pub folder.

  • Step 3: After that go on static-> Frontend-> Magento (or either your theme name)-> luma-> en_US-> Css

Like below snap shot

  • Step 4: After that in css folder you show like this structure.

  • Step 5: Uploaded your custom css file here like style-new.css or anything else which you want.

Your custom css file is successfully added .

Calling of custom css file

  • Step 1: Go to vendor folder .

Your root folder show like this

  • Step 1: After that we will go on pub folder.

  • Step 2: After that we will go to

Magento theme-frontend-blank  Magento_Theme-> layout-> default_head_blocks.xml file

  • Step 3: Open default_head_blocks.xml file

And call your custom css file path like below snap shot. After that save this file. Your custom css file is ready to work.

Add custom JS File

  • Step 1: Similarly follow step 1 and step 2.

Step 2: After that go on staticFrontend-> Magento (or either your theme name)-> lumaen_US-> js. Like below snap shot

  • Step 3: After that in js folder you show like this structure.

  • Step 4: Uploaded your custom js file here like custom.js or anything else which you want.

Your custom js file is successfully added .

Calling of custom js file

  • Step 1: Go to vendor folder

Step 2: After that we will go to Magento-> module-theme->view-> frontend-> layout-> default_head_blocks.xml

  • Step 3: Open default_head_blocks.xml file.

And call your custom js file path like below snap shot.

After that save this file. Your custom css file is ready to work.