Help with HTML Text color

Hi

Anyone care to modify the HTML code below to change the text color from black to red: (1) Title & (2) line items ?

<div class="nasa-flex margin-bottom-15 flex-wrap" style="gap:10px;">
  <h4 class="fs-14 margin-top-0 margin-bottom-0 margin-right-10">Kitchenware & Cookware:</h4>
  <a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/pots-pans/">Pots & Pans</a> |
  <a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/professional-kitchen-knives-accessories/">Professional Kitchen Knives & Accessories</a> |
  <a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/kitchen-utensils-equipment/">Kitchen Utensils & Equipment</a> |
  <a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/kitchen-appliances/">Kitchen Appliances</a> |
  <a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/food-storage-containers/">Food Storage & Containers</a> |
  <a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/extenders-racks/">Extenders & Racks</a></div>

Thanks in Advance.

You could use CSS like this:

.nasa-flex h4,
.nasa-flex a{
  color:red!important;/* you can lose !important if you match specificity*/
}

However, I don’t know the extent of that class and you may have it scattered all over your site. Therefore you could add a custom class to the html and use that as a hook.

e.g.Add a new class (custom-highlight);

<div class="custom-highlight nasa-flex margin-bottom-15 flex-wrap" style="gap:10px;">

Then adjust the css:

.custom-highlight h4,
.custom-highlight a{
  color:red!important;/* you can lose !important if you match specificity*/
}

That’s the best I can do without seeing the page in question.

1 Like

It is poor practice, but you can insert inline CSS:

<div class="nasa-flex margin-bottom-15 flex-wrap" style="gap:10px;">
  <h4 class="fs-14 margin-top-0 margin-bottom-0 margin-right-10" style="gap:10px; color:red;">Kitchenware & Cookware:</h4>
  <a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/pots-pans/" style="color: red;">Pots & Pans</a> |
  <a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/professional-kitchen-knives-accessories/" style="color: red;">Professional Kitchen Knives & Accessories</a> |
  <a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/kitchen-utensils-equipment/" style="color: red;">Kitchen Utensils & Equipment</a> |
  <a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/kitchen-appliances/" style="color: red;">Kitchen Appliances</a> |
  <a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/food-storage-containers/" style="color: red;">Food Storage & Containers</a> |
  <a href="https://www.oshwalwholesalers.com/product-category/kitchenware-cookware/extenders-racks/" style="color: red;">Extenders & Racks</a>
</div>
1 Like

Thanks Folks.

Both solutions are working fine.

However, the ‘|’ hasn’t changed color. Still showing as black.

@paul & @archibald - do you mind reviewing the code ?

Site URL

Rgds

In first line, change:
style="gap:10px;"
to:
style="gap:10px; color:red;"

(color:red; can then be deleted from the <h4> element.)

1 Like

For the css version you can do this.


.nasa-flex,
.nasa-flex h4,
.nasa-flex a{
  color:red!important;/* you can lose !important if you match specificity*/
}
1 Like

Thanks Folks.

It’s looking neater with a black b/g & white color text.

1 Like

As Archibald touched upon, using inline styles isn’t good practice. It overrides the CSS styling, so when you come back to it, or someone else picks up your project they are going to have a real headache trying to figure out why their CSS rules aren’t working.

I’m not familiar with elementor and the theme you are using, I would imagine there are probably in-built ways of doing your custom styling.

For a custom CSS approach though, the following styles seem to have the right specificity to achieve what you are after, without the need for inline styling e.g. style='gap:10px;' or style='color: #fff;'

Edit: You have two .nasa-footer-bottom sections. The second being the copyright, terms and condition section. The only unique identifier I could see is the data-id, with the section you are interested in being ‘42d648b’. Again I would imagine you could add a classname to this section in elementor e.g. .nasa-footer-bottom__product-links, that would make things a little cleaner.

Using the data-id, this should work.

#nasa-footer .nasa-footer-bottom[data-id='42d648b'] {
	color: white;
}

#nasa-footer .nasa-footer-bottom[data-id='42d648b'] a {
	color: inherit;
}

#nasa-footer .nasa-footer-bottom[data-id='42d648b'] .nasa-flex {
	gap: 10px;
}

or if CSS nesting is supported

#nasa-footer .nasa-footer-bottom[data-id='42d648b'] {
	color: white;
	
	a {
		color: inherit;
	}
	
	.nasa-flex {
		gap: 10px;
	}
}
1 Like

Thanks for the useful tip.

I gave an inline CSS option because post #1 specifically asked for modification of the HTML code with bold emphasis.

1 Like

I wasn’t questioning you offering an inline solution, you already mentioned in post #3 :slight_smile:

It is poor practice, but you can insert inline CSS:

1 Like