How to change color for links (href text) in thymeleaf?

Question

I have the below link(href) in Thymeleaf page.

<div class="product-preview-container"
    th:each="prodInfo : ${products}">
    <ul>
        <li>Product Code:  <span th:utext="${prodInfo.productCode}"></span></li>
        <li>Product Name:  <span th:utext="${prodInfo.productName}"></span></li>
        <li>Product Price: Rs <span th:utext="${prodInfo.productPrice}"></span></li>
        <li><a th:href="@{|/shopping/buyProduct?code=${prodInfo.productCode}|}" th:color="white">Add to Cart</a></li>
    </ul>
</div>

CSS

.product-preview-container {
    border: 1px solid #ccc;
    padding: 5px;
    width: 250px;
    margin: 10px ;
    display: inline-block;
    text-align:left;
    color: white;
}
  
.product-preview-container input {
    width: 50px;
}

Output:

Product Code, Product Name and product Price all are coming in white. Except the Add to Cart potion. My background has an image of blue color. I want to make the link Add to Cart to be displayed in white. How to do that?

Answer 1

Simply,

You can add a color to <a> tag.

.product-preview-container a{
  color: white;
} 

 .product-preview-container { border: 1px solid #ccc; padding: 5px; width: 250px; margin: 10px; display: inline-block; text-align:left; color: white; }.product-preview-container input { width: 250px; }.bgblue{ background:#034d89; width: 282px; /* inner div width+margin+padding+border = 250+1*10+2*5+2*1=282px */ }.product-preview-container a{ color: white; }

 <div class="bgblue"> <div class="product-preview-container" th:each="prodInfo: ${products}"> <ul> <li>Product Code: <span th:utext="${prodInfo.productCode}"></span></li> <li>Product Name: <span th:utext="${prodInfo.productName}"></span></li> <li>Product Price: Rs <span th:utext="${prodInfo.productPrice}"></span></li> <li><a th:href="@{|/shopping/buyProduct?code=${prodInfo.productCode}|}" th:color="white">Add to Cart</a></li> </ul> </div> </div>