Magento 2.0.18 is the final 2.0.x release. After March 2018, Magento 2.0.x will no longer receive security patches, quality fixes, or documentation updates.
To maintain your site's performance, security, and PCI compliance, upgrade to the latest version of Magento.

Cascading style sheets (CSS)

Overview

Magento 2 incorporates LESS, a CSS pre-processor that simplifies the management of complex CSS files. To define styles of a Magento store, you can use both - CSS and LESS stylesheets.

Magento application provides a built-in LESS UI library, which you can optionally extend.

To customize storefront styles, you need to create a custom design theme. Then you can use one of the following approaches:

  • If your theme inherits from the Magento out-of-the-box Blank or Luma theme, you can override the default LESS files; for example to change the values of the variables used in the default files.
  • Create your own LESS files using the built-in LESS preprocessor.
  • Create your own CSS files, optionally having compiled them using third-party CSS preprocessor.

Things to remember when working with styles

Make sure that you set your Magento application to the developer or default mode.

If your style changes do not apply after refreshing the page, cleaning the static files cache might help. See the Clean static files cache topic for instructions how to do this.

Change styles: walkthrough

Here is a simple illustration of changing styles using the first approach: changing the color of the buttons of a certain class. In the Blank theme, the buttons of the .action.primary class, so called primary buttons, are blue. The following image illustrates this:

The default view of a product page, with the orange Add to Cart button

OrangeCo wants to change the color of the primary buttons to orange. To achieve this, they do the following:

  1. Create a new Orange theme, which inherits from the Blank theme .
  2. In the Orange theme directory add the overriding app/design/frontend/OrangeCo/orange/web/css/source/_theme.less file with the following code:
//  Primary button
@button-primary__color: @color-white;
@button-primary__hover__color: @color-white;
@button-primary__background: @color-orange-red1;
@button-primary__hover__background: @color-orange-red4;
@button-primary__border: 1px solid @color-orange-red2;
@button-primary__hover__border: 1px solid @color-orange-red2;

When OrangeCo applies their theme, the primary buttons will look like on the following image:

The customized view of a product page, with the grey Add to Cart button

What's in this chapter

Other topics of this chapter describe the following: