How can I add CSS to Magento2 ? Like I would like to add
.customer .top-links li { padding-right:5px; }
CSS Code in Style Sheets of Magento2, What should I do ?
Add a comment
|
2 Answers
1.Add custom.css file in your theme
app\design\frontend\<vendor>\<theme>\web\css - Custom.css
2.And add default_head_blocks.xml in
app\design\frontend\<vendor>\<theme>\Magento_Theme\layout - default_head_blocks.xml
3.default_head_blocks.xml has
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<css src="css/custom.css"/>
</head>
</page>
1 ) To add custom CSS / LESS or change existing CSS / LESS in Magento you Sholud always use _extend.less in your extended theme.
If you are extending your theme from LUMA / BLANK then you need to create _extend.less at below location or it already can be there in your purchased theme.
app\design\frontend\vendor-name\theme-name\Magento_Theme\web\css\source\_extend.less
See here detailed answer for adding your custom CSS/LESS via _extend.less .
2 ) You can also try the easiest way mentioned by @Ranganathan.S.
- But when you update existing CSS then there is problem in CSS Rendering. Because magento load styles-m.css and styles-l.css at first place.
- You are using vanilla css instead of LESS.
3) Change CSS of specific module by extending module .
- you can see detailed answer of changing module specific CSS here
- This will override only your module CSS .
I hope this will help you and others as well.