Working with CSS at Magento 2

It’s too easy is the first thing when a Magento developer speaks about CSS, but sometimes it got trouble for example my last challenge was to remove a CSS because it was at the core of the Amasty module, and I could not change or override it. after a simple search, I found a way to remove CSS and set my new CSS instant of it.

Whatever lets to say some simple but important thing about CSS in the Working with CSS at Magento 2 article

Contents hide

1 Working with CSS at Magento 2

1.1 1- add CSS by XML to the template

1.2 2-adding CSS to custom module

1.3 3- remove a CSS

2 4- set priority to load the CSS

1- add CSS by XML to the template

create or find default_head_blocks.xml

It should be on ‘/Magento_Theme/layout/default_head_blocks.xml’

Open the file and add below code

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Magento_Theme::css/chalak.css" rel="stylesheet" type="text/css"  />
    </head>
</page>

Now, create a CSS file at the ‘Magento_Theme/web/css’ with ‘chalak.css’ name.

The empty CSS files do not show at the Magento.it means when the CSS file is empty Magento will ignore it.

Question : how i can add external CSS from another site like bootstrap

        <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"  src_type="url" rel="stylesheet" type="text/css"  />

Question: how I can say to Magento use my CSS file at the custom screen for example use it for the mobile device

<css src="css/chalak.css" media="screen and (min-width: 768px)"/>
        <css src="css/chalak.css" media="print" />

2-adding CSS to custom module

As we know all Magento routes have an XML file. For example, the register page XML file is ‘customer_account_create.xml’, so if we open it we should see two major sections head and body. If, which one does not exist does not worry they are optional. For adding CSS we need to head section, and it should be added there. My module name is Core and my company name is ChalakSoft. When I want to add a custom CSS for Magento’s frontend, I will add an XML file here ‘app/code/Chalaksoft/Core/view/frontend/layout’. And the files name should be some route for example core_check_license.xml, and now I add my custom CSS to head

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Core_ChalaSoft::css/custom.css" rel="stylesheet" type="text/css"  />
    </head>
</page>

as you know we should add our css file at the here ‘app/code/Chalaksoft/Core/view/frontend/web/css/custom.css’.

Question : if I want to add the CSS file to all page (route)

Do not worry, the Magento is too fixable. Just create default.xml file as your route XML file, and it will be added at all the page

3- remove a CSS

For removing the CSS file you can do like this

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <remove src="Core_ChalaSoft::css/custom.css"/>
    </head>
</page>

4- set priority to load the CSS

it is too easy just add sort directive to you code

<css src="css/custome.css" order="100" />

It will be continued …

A Magento developer