How to style classes with card-mod?

I have a markdown card and I need to have different style inline text like “red blue”, so red should have color red and blue should have color blue.
Please help me to understand what am I doing wrong here, see my code:

This is the output:

This also does not work:

You can define the colors in the content, no need for card_mod

type: markdown
content: |
  <font color="red">red<font color="blue">blue </font>


You’ll need to go with Liquid_Cooled’s solution, but note that your first post doesn’t contain valid CSS and the second has a typo (clor).

Please don’t post screenshots in future.

Separating presentation from content is generally a good idea, but I’ve run into issues myself, specifically with markdown cards, where the modified CSS got stripped. This has to do with page loading timing and there’s nothing you can do about it, hence the alternative solution. Use your browser’s dev tools to inspect the DOM after applying custom styles to see if it’s actually injected — and injected in the right place.

1 Like

Thanks @LiQuid_cOOled, seems markdown does not accept HTML5, while your syntax is HTML4, but that will do anyway for my purpose.
What if in need more styling, like padding/margin and similar styling?

@parautenbach You are right, I made the typo before the screnshoot, but the blue should have worked :slight_smile: