What is CSS in Magento 2?

Apr 23, 2019467
What is CSS in Magento 2?

CSS – Cascading Style Sheets – is a style sheet language that describes how the HTML or XML content will be displayed on a computer screen. The scope of what CSS determines is rather wide: from the colors of text and backgrounds, font styles, spacings between paragraphs to layout configurations (for example, columns and their position relative to each other) and many other page design aspects. Together with HTML and JavaScript, CSS lies at the base of the World Wide Web technology.

Table of contents:

What is CSS in Magento 2
What is Less in Magento 2
Where are CSS files located in Magento 2
How to add Magento 2 custom less file
How to edit CSS in the admin panel in Magento 2
How to add CSS to CMS page and CMS blocks in Magento 2
Working with CSS in Magento 1 vs in Magento 2

What is CSS in Magento 2

CSS creates a uniform look of several or even all pages of the website, and that is its major benefit and value. Instead of manually defining styles for each element, a developer specifies all the visual configurations in a single CSS document, allowing to save a great amount of time and effort. Moreover, any alterations in the style are automatically applied to all the pages it was utilized for. Apart from this, CSS is compatible with multiple devices and browsers, which means no sophisticated optimization is required.

Due to all these benefits CSS have become an important aspect of Magento frontend development, and the knowledge and skill of CSS are required from a good-level Magento specialist.

What is Less in Magento 2

Magento ecommerce platform natively incorporates a preprocessor named Less. Less simplifies the process of working with CSS and extends its capabilities, providing access to a wide range of variables, functions, nestled rules, operations and mixins, that bring the process of writing styles to the next level. Moreover, with Less, changes to input files are immediately available. Apart from that, Less supports lazy loading, or dynamic function loading that gives the developer the freedom to define and use variables whenever and wherever they wish.

Less is a relatively recent introduction to Magento functionality, for it was introduced to the Magento 2 version in 2015. Before that, however, Magento 1 by default utilized another CSS preprocessor – SaSS, and you can still use it as your preprocessor of choice. Both tools share a number of similarities, from syntaxis to functionalities they bring, and the reason SaSS was discarded in favour of Less is pragmatic – the latter was more reliable. Magento developers wanted to commit to a technology with a stable PHP implementation, and unfortunately, it was Less that had it. And since Less remains the native Magento preprocessor, it will be fair to say it does its job effectively.

Where are CSS files located in Magento 2

After the compilation, all the resulting CSS files will be located at the following path
pub/static/frontend/<Vendor_Name>/<Theme_name>/<locale>

where

  • <Vendor_Name> – name of the vendor folder that contains your theme,
  • <Theme_name> – name of your theme,
  • <locale> – name of the current site location (for instance, en_US).

These files are formed based on the LESS and CSS original files, located in various places in Magento. In order to fully understand this system, let us have a look at the core Magento style files:

There is the following structure of style files:

  • /<Namespace>_<Module>/web/css – the location of style files for different modules;
  • /web/css –  the location of core style files.

The list of the core theme files, located in the /web/css theme folder:

  • styles-m.less – contains the core website and mobile devices styles. This file contains other files, for instance, _styles.less.
  • styles-l.less – contains styles for desktop devices. It also contains other files, for example, _styles.less.
  • _styles.less – a compound file that contains other style files. According to Magento file naming standards, the underscore symbol (“_”) signifies that the file is not used separately, but is a part of other files.
  • /source – the folder containing configuration files that call Magento UI library mixins.
  • /source/_theme.less – the file containing new values for standard variables.
  • print.less – styles for the printed website version.
  • /source/_variables.less – file where the user variables are commonly placed.

Apart from core style files, you can connect additional files to your theme. As a rule, they will be located in your theme folder at the /web/css path.

If you want to change style files, it is better to be done in the source files. I strongly discourage you from changing the resulting files, for at the further compilation the changes you made will be overridden.

What are Magento parent theme and child theme CSS

As a rule, a custom theme is inherited from another theme; in this case, the custom theme is a child one, while the theme it is inherited from – the parent one.

The child theme will by default have the same styles as the parent one. In case a certain website element has a CSS rule value from a parent theme will differ from the child theme (for example, text color), then the child theme will have priority. Also, if the child theme will contain a CSS file with the same name and the same path, as the parent, the child theme file will completely override the corresponding parent theme file during the final CSS compilation.

Where to change styles in Magento 2

Styles in Magento 2 can be changed in different places. One way is to do it in LESS and CSS files of your theme at the server. Another way is to add styles for a theme, a certain page or a certain block via Admin panel. The third method is to add inline styles via style attribute of the element; however, this is not an advisory practice, for it will make the styling via outline styles too complicated, because the inline style has priority over the outline ones).

How to add custom CSS files in Magento 2

Apart from native files, you can also utilize custom style files, for instance, files of third-party libraries, custom style files and so on.
As a rule, such files are connected in the following file:

<your_theme_dir>/Magento_Theme/layout/default_head_blocks.xml

For connection, add to <head/> tag at default_head_blocks.xml file the <css/> or <link/>. The first tag is used specifically for style files, while the second can connect both style files and JavaScript. Since these tags have similar syntax, we will take the <css/> tag as an example:

<css src=”<path>/<file>” media=”print|<option>”/>

Where

  • <path> – path to the file relative to <your_theme_dir>/web. If you want to add a link to the file, situated in your theme’s module folder, use <Namespace>_<Module>::<path_to_file> (for instance, if you add Magento_Theme::, the path will begin relative to <your_theme_dir>Magento_Theme/web/).
  • <file> – name of the connected file in .css format.
  • media – attribute that is used for determining additional parameters of file attachment. For instance, a file with media=”print” parameter will be utilized for the printed version of the webpage, while the file with media=”screen and (min-width: 768px)” file will be applied solely for devices with screen dimension of 786 pixels and more.
  • src_type=”url” – additional attribute, denoting that the file connects from another server and the “src” path will be specified absolutely, not relatively to the theme. Therefore, use this attribute to connect styles from other websites.

Example of connecting files:

As a result, the following files will be added:

How to add custom Less file in Magento 2

The process of adding a custom LESS file is similar to adding a CSS file. We use the following layout file:

<your_theme_dir>/Magento_Theme/layout/default_head_blocks.xml

Add <css/> or <link/> tags to the file’s <head/> tag. The tags have similar syntax, so I will use the <link/> tag as an example:

<link src=”<path>/<file>” media=”print|<option>”/>

Where

<path> – path to the file relative to <your_theme_dir>/web. If you want to add a link to the file, situated in your theme’s module folder, use <Namespace>_<Module>::<path_to_file> (for instance, if you add Magento_Theme::, the path will begin relative to <your_theme_dir>Magento_Theme/web/).

<file> – name of the connected file in .less format.

media – attribute that is used for determining additional parameters of file attachment. For instance, a file with media=”print” parameter will be utilized for the printed version of the webpage, while the file with media=”screen and (min-width: 768px)” file will be applied solely for devices with screen dimension of 786 pixels and more.

src_type=”url” – additional attribute, denoting that the file connects from another server and the “src” path will be specified absolutely, not relative to the theme. Therefore, use this attribute to connect styles from other websites.

Example of file connection:

As a result, the following file will be added:

<your_theme_dir>Magento_Catalog/web/css/source/lib/test.css

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

How to edit CSS in the admin panel in Magento 2

If you need to change CSS styles for the current Store View, but you do not have access to the server with theme style files, then you can do this via the Admin panel.

Step#1: Navigate to CONTENT -> Design -> Configuration in Magento 2 admin panel.

content design configuration magento 2

Step #2: Select the required Store View or add styles globally to all Store View in the following menu.

select the store view

Step #3: We can add our custom styles in the HTML Head section of the Scripts and Style Sheets field. We can add both the link to the style file and the styles themselves.

what is css in magento2

Step#4: use the following tag
<link rel=”stylesheet” type=”text/css” media=”all” href=”path_to_CSS_file” /> (where path_to_CSS_file – path to the style files) to add the file styles.

CSS styles are added in the tag

<style>
… your CSS styles …
</style>

Bear in mind that this way of adding CSS styles is not the best practice and should not be utilized routinely. The best solution here is to apply styles in separate Less files of your theme – this will greatly simplify the process of developing and maintaining your theme.

How to add CSS to CMS page and CMS blocks in Magento 2

If it is necessary to add styles only to certain CMS pages or blocks, it can be performed via Magento admin panel. To do this, open the editing of the corresponding CMS page or block.

CMS Pages are in the section CONTENT -> Elements -> Pages.

content element pages

CMS blocks are in the section CONTENT -> Elements -> Blocks.

content elements blocks

After we have selected the necessary page or block, we add a link to the style file or the styles themselves in the Content field. This action was described above in the How to edit CSS in the admin panel in Magento 2 paragraph.

Working with CSS in Magento 1 vs in Magento 2

Generally, Magento 2 has an improved process of working with CSS files, compared to Magento 1. Apart from this, Magento 2 not only standard CSS files, but also the following items:

  • built-in Less compiler. It allows you to work with Less files by compiling these files into final CSS files. Using LESS greatly simplifies and speeds up the process of creating styles for a site due to the fact that we get additional LESS functionality (in short, these are variables, mixins, nesting code formatting, etc.)
  • UI library. This library uses the LESS preprocessor and consists of a set of Less files, which in turn use sets of mixins and variables to style all the main elements of the site (such as buttons, forms, navigation, etc.) You can find a full list of elements available for styling here – https://magento-devdocs.github.io/magento2-ui-library/). The use of UI library allows you to significantly simplify the process of styling the site. For example, you can change several UI library variables and get a significantly transformed website.

Another difference is the location of the CSS theme files. In Magento 1, they were situated at the following path:
/ skin / frontend / <Vendor_Name> / <Theme_name> / css.

While theme style files in Magento 2 are more structured and divided into common style files (<Theme_folder> / web / css) and module style files (<Theme_folder> / <Namespace> _ <Module> / web / css), to which they apply.

Wrapping it up

I believe you got a comprehensive understanding of that is CSS in Magento 2 and how to work with them. Moreover, you learned what is Less and how to apply it to CSS files in Magento. If you have any questions or comments, feel free to leave them down below.

Looking for an experienced Magento development team? Turn to BelVG for custom solutions.


Partner With Us Looking for a partner that will help you to grow your business? We are the right company to develop your webstore. Feel free to get in touch with us. We will be happy to discuss your business opportunities and provide you with a Free Quote. Talk to Vlad

Post a new comment

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