Anyway to apply css to custom html tags?

[viviet]

I’m looking for a way to apply colors to texts in a simpler way.

I’ve been using inline css <div style="color:red"> text </div>
and css class selectors, like .red { color : 'red';}.

However, doing by so becomes quite a hassle in situations like

<span class="red"> R </span> <span class="orange"> A </span>  I N B O W 
// RAINBOW in different colors with each character.

I wish I could just do something like

<red> R </red> <orange> A </orange> <yellow> I </yellow> N B O W 

I’ve tried doing something like

obsidian file
<red> TEXT </red>

obsidian.css
red { color: 'red'}

but it didn’t work.
I checked the console and found out the tags <red></red> were being removed in read view.

Would there be anyway to do something like this?