←
Back to Resources
How to Create & Customize Anki Flashcards
Create and customize your Anki flashcards with step-by-step video tutorials covering card styling, templates, fields, audio, images, animated Chinese stroke order and more. I add new tutorials as I cover more Anki features and customization options, so subscribe on YouTube to catch future tutorials.
Video Tutorials
Some tutorials use HTML or CSS that you can copy and paste into Anki. If you're following one of these videos, jump to its matching code below.
Create Anki Cards For Beginners
HyperTTS Tutorial:
Add Audio to Decks
Style Your Decks: Colors, Fonts & More!
Add Images to Your Decks
Find Anki Media Files in Seconds:
Easy Methods for PC & Mac
Add Stroke Order Animation To Your Decks
How To Split Audio Using Audacity
Rename Multiple Files on a Mac
Create Decks With Images Using CSV
Create Decks with CSV
With or Without Audio
Copy & Paste Code For: Style Your Decks: Colors, Fonts & More!
Prefer a printable? download the complete Anki styling reference to keep a copy.
HTML Front Template:
<div class="card">
<div class="yourfieldname">{{Yourfieldname}}</div>
</div>
HTML Back Template:
<!-- Front Template -->
<div class="card">
<div class="yourfieldname">{{Yourfieldname}}</div>
</div>
<hr id=answer>
<!-- Back Template -->
<div class="card">
<div class="yourfieldname">{{Yourfieldname}}</div>
<div class="yourfieldname">{{Yourfieldname}}</div>
</div>
CSS Styling Section:
.yourfieldname {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
}
CSS For Play Button:
.replay-button {
font-size: 24px;
padding: 10px; /* Adjust the padding to increase the clickable area */
}
.replay-button svg {
display: none;
}
.replay-button:before {
content: "🔊";
font-size: 24px;
}
HTML to Insert Line:
<hr id=answer>
CSS to Style Line:
#answer {
border: 0;
height: 5px;
background-color: red;
margin: 20px 0;
border-radius: 10px;
}
Copy & Paste Code For: Transform Your Anki Decks with Beautiful Background Pictures
Prefer a printable? download the complete Anki background pictures reference to keep a copy.
CSS Background Picture:
.card {
background-image: url("beach-scene.png");
background-size: cover;
background-repeat: no-repeat;
padding: 20px; /* Optional: add padding to ensure content isn't flush with the edges */
}
CSS for Nested Cards:
.card .card {
background: none; /* Ensure nested elements do not inherit the background */
}
Written Tutorials
How to Add Custom Fonts to Anki
Change how Chinese characters and other text appear on your cards by adding custom fonts to Anki.
Read Tutorial →