"Naming" colors in CSS

Anki Card Design
1

Hi! In my Anki collection, I use particular colors (and sometimes other font features, like underlining) to mean particular things – for instance, red for emphasis, gray for de-emphasis, blue for “structure” (numbering etc), purple for “marking instructions” (e.g., specifying a margin of error for quantitative questions), etc. I’d like to be able to change the color associated with a particular function without having to change it manually in every card type. So, I’m looking for a way to say something in the note type CSS like “‘emphasis’ = red”, and then in the template for individual card types, say something like “font color=emphasis” rather than “font color=red”. That way I can change the color of all the emphasized text in the note type just by making one change in the CSS.

I spent a while Googling this without finding a clear answer (maybe I just don’t know the right search terms to describe what I’m trying to do). But I did eventually find something that seems to work, by trial and error. In the note type CSS, I add something like:

#marking {color: #af52de;}

And then in the card templates, I write:

<font id=marking> ... </font>

…which gives me text with the color #af52de. But since I arrived at this by trial and error, I’m guessing it’s not the preferred/optimal solution, and would rather find that solution before I invest a lot of time in updating all my templates.

So, if anyone can tell me the “right way” to do this, that would be much appreciated!

2

What you are looking for is probably CSS / HTML classes. See the documentation for more information. You were actually quite close to the “good” solution (the only difference is that id=marking only works for a single tag, that is, you are not supposed to have several tags with id=marking — hence the name id — whereas with class=marking, you don’t have this restriction anymore)!

Also, you may be interested in css variables to set something like emphasis=red and, in the rest of your css declaration file, you can use emaphsis instead of red, so that if someday you want to change your emphasis color to, say, green, you only have to change emphasis=green instead of changing it everywhere.

3 Likes
3

Thanks, that’s exactly what I was looking for!

So now I have this in my template css:

.emphasis {color: #ff3b30;}
.deemphasis {color: #8e8e93;}
.blank {color: #007aff; font-weight: bold;}
.prompt {color: #007aff;}
.marking {color: #af52de;}
.structure {color: #34c759}

…and in the card templates, tags like

<font class=marking>

…which seems to work exactly as desired.

My css is pretty simple apart from this (I’ve only made one or two other tweaks), so sounds like I probably don’t need variables now. But I’ll have a look at the documentation and keep that option in mind for later.