0

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 ?

0

2 Answers 2

4

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>
0
1

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 .

I hope this will help you and others as well.

Not the answer you're looking for? Browse other questions tagged or ask your own question.