Get Free Audit

How to Include CSS in Magento 2

May 10, 2017

6381 Andrey Litvin

How to Include CSS in Magento 2

CSS is assured to be the stylesheet language used for describing the presentation of a document written in HTML or XML. It is a well-designed mechanism that allows adding style including fonts, colors, spacing, lines, length, width. Besides, CSS describes the way the elements should be rendered. What are the benefits of applying CSS? Content accessibility is improved, more flexibility and control in the specification of presentation characteristics are provided. At the same time, it helps to reduce complexity and repetition in the structural content. On the whole, CSS is a must-have that can be applied for Magento as well. The next 4 ways needed to follow for CSS implementation in Magento 1.9:

Method 1: the reference file should be added to the code:

Method 2: the way implies HTML addition in the code:

Method 3: it’s necessary to set “inline style” into the element:

Method 4: to include CSS to the xml file:

You can find this file by following the path: app\design\frontend\rwd\default\layout\page.xml. Then you need to find:

and right after this piece of code, you should insert:

Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey

Then you add CSS file in the following catalog: skin\frontend\rwd\default\css\mystyle.css

After all these actions are performed, don’t forget to refresh the cache.

With regards to Magento 2, the way of style addition has changed. Now styles are added in default.xml file. If you’d like to add style, you should use the default.xml file that is located in <theme_dir>/Magento_Theme/layout/default.xml. Now you should add custom.css file in the default theme. Before adding, you should create the style. Use the following instruction to perform it:

First off, create custom.less file (.less should be applied as in Magento 2 CSS pre-processor less is used) and add, for example, gray color for the whole website. Follow the catalog app\design\frontend\Magento\luma\web\css and create the file custom.less that should contain the following content:

The file should be saved. After saving, let’s get back to addition. In the catalog <Magento_Blank_theme_dir>/Magento_Theme/layout/ it is necessary to open the file default.xml and add the following lines before <body> tag:<body> tag:

As a result, the new style has been added in Magento. And in case you want to add external CSS file, you should specify src_type=”url” parameter. For instance, you want to add external google fonts to your website, that’s how it should look like:

The only things left is to perform a deploy, after which the style will appear on your website.

* the abbr used by the example of the standard theme:

Andrey Dubina
Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

1 comment

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *