Change CSS style for price (tag)

Question

does anyone know how can I change the style for the price in product listings (not on product details page) on front-end? I would like to make the price bigger and change its color. I tried but I simply cannot locate the CSS (LESS) file that controls the style of the price tag.

Please see the image

Answer 1

To change price or CSS / Less for catalog page copy _module.less file and paste it in your theme directory here you will be able to make any change you want :

copy :

/theme-frontend-luma/Magento_Catalog/web/css/source/_module.less

And Paste it in :

/Vendor/Theme/Magento_Catalog/web/css/source/_module.less

Then you can make any change you want :

NOTE : after making changes delete pub/static/frontend and var/view_processed folder and deploy static content again.

Answer 2

.product-item .price-box .price {
    ...
}

You can debug the less & css files, more informations in : How CSS and LESS files are preprocessed and how to debug them