# "Naming" colors in CSS

**URL:** <https://forums.ankiweb.net/t/naming-colors-in-css/20506>\
**Category:** Card Design\
**Created:** [June 2, 2022, 4:28pm UTC](https://forums.ankiweb.net/t/naming-colors-in-css/20506 "2022-06-02T16:28:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ctarsney](https://avatars.discourse-cdn.com/v4/letter/c/dec6dc/32.png) [@ctarsney](https://forums.ankiweb.net/u/ctarsney)\
**Post date:** [June 2, 2022, 4:28pm UTC](https://forums.ankiweb.net/t/naming-colors-in-css/20506/1 "2022-06-02T16:28:59Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![BlackBeans](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/blackbeans/32/2283_2.png) [@BlackBeans](https://forums.ankiweb.net/u/BlackBeans)\
**Post date:** [June 2, 2022, 5:42pm UTC](https://forums.ankiweb.net/t/naming-colors-in-css/20506/2 "2022-06-02T17:42:39Z")

</div>

What you are looking for is probably CSS / HTML classes. See [the documentation](https://www.w3schools.com/html/html_classes.asp) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) 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.

---

<div class="post-metadata">

**Author:** ![ctarsney](https://avatars.discourse-cdn.com/v4/letter/c/dec6dc/32.png) [@ctarsney](https://forums.ankiweb.net/u/ctarsney)\
**Post date:** [June 2, 2022, 9:28pm UTC](https://forums.ankiweb.net/t/naming-colors-in-css/20506/3 "2022-06-02T21:28:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 1, 2023, 7:35am UTC](https://forums.ankiweb.net/t/naming-colors-in-css/20506/4 "2023-05-01T07:35:21Z")

</div>