How to add external CSS in a field

Anki Help
1

I want to add external CSS into the code of a field so that style changes are reflected in the browser.
Here’s what I want to add at the beginning of the field’s code:
<link rel="stylesheet" href="_mystyle.css">
The problem is that this line of code disappears after I turn off the code editor, click a different card, etc.
Does anyone know why that is happening and how I can fix it?
Or is there another way to change apply some CSS so that it shows up in the fields in the browser?

2

I’m not sure that I’d recommend it, but there is an anki-editable class that can be used to set styles for when the fields are editable e.g. in the browser edit panel. Is this what you want?

<style>
anki-editable {
  font-size: 100px;}
</style>

As for the line of code disappearing, try the following instead:

<style>
  @import url("_mystyle.css");
</style>

This suggestion was intended for the card template, but styles there are only applied to the cards, not the editable fields, so it would have to be placed in the field itself.

3

I’m not sure if I’m doing it the right way, but here’s what I tried:
Open the browser, click on a field and turn on the HTML editor. Then paste the two options you suggested at the beginning of the code. Then turn off the HTML editor.
When I turn it back on, the code I pasted is gone.
Am I doing something wrong?

4

I wrote an add-on for this a while back: CSS Injector - Change default editor styles - AnkiWeb

Add the CSS to field.css in the user_files folder, if you want to style field contents. To change the “outer” appearance of the editor, use editor.css.

Original thread: Change default HTML/CSS template in editing mode - #4 by kleinerpirat

4 Likes
5

It seems to delete CSS it can’t interpret. Try it with just the first - that worked for me. If that works, try the just the second one, with the file in your media folder.

6

I did try both individually. It doesn’t work.

7

By the way, I think this problem is new to the latest versions of Anki.
I remember doing this successfully with a previous version of Anki 2.1, before the HTML editor update.

8

This add-on looks very useful, but I don’t want to change the entire note type, nor change any Anki settings. I only want to apply the CSS for specific notes. Shouldn’t there be a way to do that without an add-on? I ask because I don’t have the skills to fix (or even understand) an issue if it arises as a result of changing the code.

I know it was possible to just add a at the beginning of the contents of a field and have the changes show up in the browser in previous versions of Anki. Why did they change/remove this?

9

You should put the CSS in the notetype styling section (or use the add-on suggested by @kleinerpirat) and apply it via a class/id.

You can see the relevant code here. A summary: We want to provide better card preloading in the future (preload next card while showing current card), and for that, the field HTML may not contain any styles/scripts.

3 Likes