Magento Question posted in
The official documentation can be found here.

In Magento2, how can we use or embed the custom CSS?

How can we add custom CSS file in the Magento 2 application globally or on the specific pages i.e Product page or Checkout page?

Thanks

Tags:

2

Answers


  1. 0

    Yes, you can. Check it in documentation: https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css-themes.html#fedg_css-in-themes_xml, example:

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/styles-m.css" />
    </head>
</page>
    Login or Signup to reply.
  2. 0

    To add custom CSS to your module you need to include css in your Layout XML file under section.

    To include css globally, add it to default.xml or for specific file add it to your desired file (ex. catalog_category_view.xml)

    Code to add in XML file:

    <?xml version="1.0"?>
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
   <head>
      <css src="css/yourcssfilename.css" />
 </head>
</page>

    Now you need to create a css file which you defined in your XML file.

    Create CSS file at app/code/vendorName/moduleName/view/frontend/web/css/yourcssfilename.css

    yourcssfilename.css

    #your CSS code

    Run below commands and check:

    php bin/magento cache:clean

    php bin/magento setup:static-content:deploy

    php bin/magento setup:upgrade

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search