Cascading Style Sheets better known as CSS, became an essential part of the modern web design. Without CSS websites become plain text with no layout at all. In this modern era where look and feel is everything, using CSS, Developers can have full control over the layout allowing them to make precise section-wise changes and give separate look. The most important part is the developer can add design flexibility and interactivity it brings to web development with cross-browser support. With growing competition in online ecommerce stores, if you want to make your design stand out from others, you must have to make use of CSS wisely.

Default, Magento allows you to build custom Extensions, CMS pages, block file and so on to give a personalized touch to your Store Layout. But sometimes, you have to give different look to the particular page or portion where you need to specify your own CSS styles sheet that allows you to have full control and build interactive layout other than default Magento. Recently, we came across a requirement where we want to add our custom design inside our extension only when the extension is enabled. To do the same we have added our Custom CSS Stylesheet using the block in Magento 2.
Here is the solution how we have did it.

Firstly, you need to create default.xml file in our extension frontend layout folder.
app\code\Vendor\Extension\view\frontend\layout\default.xml

And after that we need to create init.php file inside our block folder.
app\code\Vendor\Extension\block\init.php

That’s it, hope this code will help you to add your Custom CSS Stylesheet file using the block in your Magento 2 store. You can even use & customize this code according to your need for integrating stylesheet.
Let us know if you are facing an issue while implementing using this code.
Happy Styling!

[Total: 10   Average: 3.7/5]