css_quick_guide_overview.md

layout	group	subgroup	title	menu_title	menu_order	menu_node	github_link
default	fedg	D_CSS_G	Quick start guide to working with styles for a new theme	Quick start guide to styles	1	parent	frontend-dev-guide/css-guide/css_quick_guide_overview.md

This chapter combines the topics aiming to help you to quickly start working with styles of your custom theme:

• Simple ways to customize a theme's styles
• Simple style changes with client-side LESS compilation vs. server-side

High-level steps to create a theme and change styles

1. In the file system, add a new theme inheriting from Magento Blank or Luma.
2. Apply your theme.
3. Decide which CSS compilation mode you will use. Compilation modes are described in the following topics:
   • Detailed description: Styles debugging
   • Practical illustration: Simple style changes with client-side LESS compilation vs. server-side
4. Customize styles. To learn how, check out the following sources:
   • CSS chapter of this book
   • Simple ways to customize a theme's styles

Why do you need to create a custom theme?

Magento provides two themes out of the box: Blank and Luma. If Magento is installed with sample data, the theme applied after installation is Luma. If no sample data is installed, the Blank theme is installed by default.

Luma inherits from Blank, which contains all the basic functionality and styling required for a theme.

You can use either Luma or Blank for your storeview, if there is literally nothing you want to change in their design.

But if there is something you want to improve, the only recommended way is creating a new theme. It can inherit from Blank or Luma so you can preserve all you need, and change or add whatever is required.

Making changes in the Magento out-of-the-box themes is a bad idea, because can result in your changes being overwritten during upgrade.

Related topics

- CSS in Magento themes - Simple ways to customize a theme's styles - Simple style changes with client-side LESS compilation vs. server-side