By default, CCS (Cascading Style Sheets) files are located in the Magento 2 application file system and are recommended not to be included in template files. Let’s take a closer look at Magento 2 stylesheets organization and the layout customization possibilities.
Magento 2 version has been improved for all intents and purposes and CSS makes no exception.
Magento 2 has been supplied with CSS preprocessor or LESS, which allows admin users manage complex CSS files in an easy way. Thus, now to define your store styles, you can avail of both CSS and LESS stylesheets.
Besides, the built-in LESS UI library can be extended to your needs.
To make it you need to create a custom design theme in one of the 3 available ways:
In case your custom theme inherits form the default Magento themes: Luma/Blank, you can override the default LESS files. Thus, you will minimize the efforts and update store design in a minor way instead of copying extensive theme files.
E.g.: change the values of the variables. For this, you need to specify new values for the desired variables in the <theme_dir>/web/css/source/_theme.less file.
Using the built-in LESS preprocessor you will manage to create the LESS files you need to customize the storefront. The less.org performs a convenient LESS2CSS editor for the reason:
You can also compile your custom CSS files.
To change the color of the ‘Add to Cart’ button, you need to go to the Blank theme, find buttons of the .action.primary class and then change the blue color for orange. Let’s review it in details:
// Primary button
@button-primary__border: 1px solid @color-orange-red2;
@button-primary__hover__border: 1px solid @color-orange-red2;
In case you have come up with issues after enabling custom CSS, try to check the next settings: