Help with HTML Text color

HTML & CSS
1

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.

2

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
3

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
4

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 ?

Screenshot_10
Screenshot_101723×145 9.62 KB

Site URL

Rgds

5

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
6

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
7

Thanks Folks.

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

Screenshot_273
Screenshot_2731758×838 144 KB

1 Like
8

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
9

Thanks for the useful tip.

10

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

1 Like
11

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