How to do customization in the Luma theme CSS?

To customize the CSS in Luma theme in Magento 2, you can follow these steps:

1. Create a child theme: Create a child theme with Luma as the parent theme. You can do this by creating a new folder under app/design/frontend with the name of your theme and then creating a theme.xml file in it. In this file, set the parent node to "Magento/Luma".

2. Create a _extend.less file: In your child theme folder, create a web/css/source/_extend.less file. This file will be used to override the Luma theme's CSS.

3. Modify the CSS: In the _extend.less file, you can modify the CSS by targeting the appropriate selectors. For example, to change the background color of the .header.content class, you can add the following code:

   .header.content { background-color: #f0f0f0; } 

4. Compile the CSS: After modifying the _extend.less file, you need to compile the CSS so that the changes take effect. To do this, run the following command in the Magento root directory:

   bin/magento setup:static-content:deploy -f 

This will compile the CSS for your child theme and make it available in the frontend.

Note: It is recommended to use the _extend.less file to modify the CSS in the Luma theme instead of directly modifying the Luma theme's CSS file. This will make it easier to maintain your customizations when updating Magento or the Luma theme in the future.