Magento2.4: how to change price color for different type of products to different color?

Question

Category Page → price font color blue for Simple Products, for the configurable → color red

Answer 1

Magento add classes to the body tag. Use these classes to format the price. An example for the product detail page:

.price-box {
  color: blue;
}
.product-configurable .price-box,
.page-product-configurable .price-box {
  color: red;
}

Do you know, how to add custom css to your project?

This will only work for product detail pages. But this will not work for category pages. If you need the color code on the category page too, you have to add classes on overriding templates.

If you want to use css, you can overwrite the vendor/magento/module-catalog/view/frontend/templates/product/list.phtml file in your custom theme. Copy the file to app/{Vendor}/{theme}/Magento_Catalog/templates/product/list.phtml and add a class to the li element.

<li class="<?php echo $_product->getTypeId() === 'configurable' ? 'product-configurable'; ?> item product product-item" ... >

If you added the class to the li element, you can use the css code above.