CSS
This tag belongs to the Additional Tags Category.
Parent tags (more general):
This tag has not been marked common and can't be filtered on (yet).
Works which have used it as a tag:
Pages Navigation
-
Honkai: Star Rail Texting! by SarunoHadaki
Fandoms: 崩坏：星穹铁道 | Honkai: Star Rail (Video Game)
28 Nov 2024
Tags
Summary
A tutorial + code for making your fic look like text messages from Honkai: Star Rail.
-
Hold-hands Inspired Texting Skin by cursedcuriosities (SetsuntaMew)
Fandoms: Ensemble Stars! (Video Game)
25 Sep 2024
Tags
Summary
This is a tutorial/live example for a Hold-hands inspired texting skin, based on the look of iOS messaging.
Series
- Part 2 of Killian's AO3 Work Skins
-
Tags
-
Tags
Summary
ao3 skins based on tumblr poll results
1. Red and blue and white text
2. Space Theme
3. Dark Colors theme
4. Simple Halloween theme -
Tags
Summary
A work skin for imitating the style of a blog or online journal post.
Chapter 1: Intro and example blog post
Chapter 2: CSS and how to create a work skin
Chapter 3: HTML to use the work skin
Chapter 4: Add a background image
Chapter 5: Add header and footer banners/images
Chapter 6: Changing the colors of the text and backgrounds -
Tags
Summary
This one is about a Storch who manages a supermax prison that can contain a FLKR (multiple actually) among other things but is so busy running this prison that she's simply incapable of being in command of her own romance life. All aboard the Storches are bottoms train I guess.
-
Tags
Summary
A workskin inspired by kpop style photocards.
-
Tags
Summary
A tutorial for a Choose Your Own Adventure/Interactive Fiction workskin. A gift for my younger self, in a way.
-
How to create your work skin to change the background color and text style of your story by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, Work Skins - Fandom, AO3 help - Fandom
22 Feb 2025
Tags
Summary
This tutorial contains the steps to change the background color and text style of your story and also to make every chapter have a different background color or text style.
This tutorial contains ready-to-use codes.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 is to apply the background color and/or the text style to the whole work.
CHAPTER 2 is to give every chapter a different background color and/or text style.
CHAPTER 3 is to have a default background color or text style while still giving every chapter a different effect.
CHAPTER 4 is to combine gradient background and gradient text in your work.Series
- Part 7 of CSS GUIDES
-
Tags
Summary
Code is from @ElectricAlice
Icons is from @EwwYThoIf you want to get mobile and ipad versions you should check this https://archiveofourown.info/works/32660914
to see how to do it, also ipad and mobile code are from there, everything is perfectly explained there :D- Language:
- English
- Words:
- 3,800
- Chapters:
- 1/1
- Kudos:
- 3
- Hits:
- 334
-
Skin for Making Character Intro Cards by SpookyTesting (FierySprites)
Fandoms: No Fandom
15 Nov 2024
Tags
Summary
A work skin for creating concise and compact cards for introducing characters in a fic – including their name, title, portrait, some characteristics, and fandom of origin. Meant to be used in crossovers, but doesn’t have to be.
-
The Best CSS kinda tutorial thing a local guy who just figured out CSS and decided to make a ridiculously long name for his CSS kinda tutorial thingy could come up with. by DavidoDaVinci for DistantManiacalLaughter
Fandoms: css - Fandom
16 Nov 2024
Tags
Series
- Part 1 of CSS with your friend, Davido :3
-
Fonts, Colours, and Others. by ZoomieZoomie324
Fandoms: Original Work, Work Skins - Fandom, HTML - Fandom
16 Nov 2024
Tags
Summary
A collection of work skins I use with their code for anyone curious. Thank you so much to Goddess_of_the_arena for having her amazing guide I'll link inside.
-
Tags
Summary
The complete collection of every piece of CSS ever created by DavidoDaVinci.
Series
- Part 2 of CSS with your friend, Davido :3
-
Breaking Ao3 the Fun Way by GumbaBunny, ⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧⅧ (GumbaBunny), 𝔾ⓤ𝕞𝕓𝕒𝕭𝖚𝖓𝖓𝒚 (GumbaBunny)
Fandoms: Original Work
21 Apr 2025
Tags
Summary
Work for testing ao3 elements.. or "How much can i break ao3?"
Click this to see summary testing
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⡠⠛⠋⠉⠉⠓⠻⢤⠀ ⠀⠀⠀⠀⠀⡟⣠⣶⠖⣤⠀⣴⣯⣹⣷ ⠀⣀⣀⣀⠀⣆⢹⣿⣿⡿⠀⠹⠿⠿⣉ ⡞⠀⠀⠀⠀⠀⠓⠦⢄⡄⠩⠥⠔⠊⠁ ⠙⡄⢠⣴⣶⣦⠀⢠⡄⣴⠀⣯⠀⠀⠀ ⠀⠲⠖⠁⠉⠁⠧⠼⠁⠈⠓⠋⠀⠀⠀
h1
h2
h3
h4
h5
h6
Look to the right.
Made you look (align="right")
- bold
- italic
- underline
strike
- big
- small
- sup sub
one two three four five A B C D E
ℂ𝕆𝔻𝔼 ℳ𝒪ℛℰ
████𓆉Series
- Part 2 of Ao3 Coding
-
Tags
Summary
The AO3 site skin (suits all devices). To use the skin, simply copy and paste the CSS code. For a preview, see this github post. Alternatively, look inside this work for more screenshots and the code.
-
Tags
Summary
This is a live example and the HTML/CSS for a work skin I pieced together to mimic a mobile Spotify playlist! Perfect for chatfics, showing what your character is listening to, having your ship exchange love songs, etc. It is not an embed and can't actually play music, but you can link songs.
-
Mystery Work
Part of ATM
Summary
This is part of an ongoing challenge and will be revealed soon!
-
Tags
Summary
a super simple qna element i made for a project i’m thinking of starting :]
-
Mystery Work
Part of タ- タ- タグ、才能のタグ
Summary
This is part of an ongoing challenge and will be revealed soon!
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
Tags
Summary
in the title. for testing formatting and shit on ao3. links to css/html posted for anyone's usage.
-
CSS GUIDES by Goddess_of_the_arena
Fandom: AO3 help - Fandom, css - Fandom, HTML - Fandom, Work Skin - Fandom, Work Skins - Fandom
22 May 2025
Summary
Guide 1 colored text, also with gradient effect.
Guide 2 new fonts, in more colors, size and with gradient effect.
Guide 3 highlight text, text boxes, diary pages.
Guide 4 glitching text similar to the Zalgo font, mirror text, vertical text, upside down text, colored blockquote.
Guide 5 underline types, line dividers (also with emoticon/emoji).
Guide 6 shadowed text, bordered text, 3D text, neon text.
Guide 7 change background color, font color and/or font type of your story, either for the whole work or giving a different style to every chapter.
Guide 8 add emoticon/emoji to story title, username, summary, notes, chapter titles.- Words:
- 28,473
- Works:
- 9
- Bookmarks:
- 66
-
How to by Charles_Rockafellor
Fandom: AO3, AO3 CSS, AO3 help - Fandom, Conlangs - Fandom, css - Fandom, HTML - Fandom, The Matrix (Movies), Work Skins - Fandom
24 Mar 2025
Summary
This series started as just a one-shot to help people with AO3's CSS for making work skins. Now that I've written a piece on making series (originally for a friend, but then shared to a Facebook group, so I figured why not add it to AO3), I figured that the two really should be linked for tutorial purposes. I had no plans to do any of this at first, so maybe I'll add more in the future (Collections come to mind, and they're really easy to do).
I don't expect to add further tutorials, but I hadn't expected to write these either. I'm calling the series complete, but who knows (one thing that keeps nudging me is to take the statistics and show how fics' half-lives vary, for example; another is putting all weird AO3 fixes into one spot).
NB: If you're wondering, please see How to make and fix a series on AO3 (in this series with the tutorial on CSS work skins for fonts, which made that link become underscored blue ink [assuming that your browser settings, site skin, and third party apps didn't prohibit it]).
- Words:
- 148,434
- Works:
- 9
- Bookmarks:
- 93
-
Replace the AO3 Icons 2.0 [Site Skin] by ZerafinaCSS (Zerafina)
Fandoms: No Fandom, Site Skins - Fandom
08 Dec 2024
Tags
Summary
A site skin that replaces the AO3 icons and a few other images, like the AO3 logo and the lock for restricted works, with new ones in a higher resolution. The new icons have a flatter and cleaner look than the original ones and their colors can be changed to any color you want!
Preview images and instructions are included.
Latest update: 18 May 2025
Series
- Part 3 of AO3 Site Skins
- Language:
- English
- Words:
- 1,391
- Chapters:
- 2/2
- Collections:
- 1
- Comments:
- 40
- Kudos:
- 97
- Bookmarks:
- 53
- Hits:
- 3,086
Bookmarked by ferager
06 May 2025
Bookmarker's Tags:
Bookmarker's Notes
Replace the AO3 Icons 2.0 [Site Skin]
ZerafinaCSS (Zerafina) -
CSS for people who like eating clay in massive quantities by DistantManiacalLaughter for whenu
Fandoms: CSS Skin Testing, HTML - Fandom, Tutorial - Fandom
02 Oct 2024
Tags
Summary
A basic guide to CSS and HTML, dumbed down for my brain and yours, free gift included for the guy who’s name I know. I am far from expert, but I’m doing my best! First chapter is explanation and demonstration, second chapter is the raw CSS code for your copy-paste loving hands. Go on, rob me.
Note: I’ll be doing my CSS experiments here so I don’t muck up my updating fics. Just stay on the first three chapters and you’re fine.
Bookmarked by DifferentDances
07 May 2025
Bookmarker's Tags:
Bookmarker's Notes
"CSS for people who like eating clay in massive quantities" by DistantManiacalLaughter
Experiments/howto in CSS/html.
-
Tags
Summary
A simple dark-mode skin with custom icons.
Latest update: 2025 February 16
-
Tags
Summary
A brief guide to putting a pair of cards, a deck or a game of Cards Against Humanity into your fanfic!
-
Tags
Summary
Made on the request of a friend ages ago.
-
Tags
Summary
No one ever tells you how the fall will hurt.
An interactive work inspired by the Fall of Icarus.
Bookmarked by BlueMoonTears
01 Jun 2025
Bookmarker's Tags:
Bookmarker's Notes
this is literally kamippoi na
extremely creative use of css here and the poetry is on point <3
-
Phone Screen / Lock Screen AO3 Work Skin Guide by imperiousmarshmallow
Fandoms: No Fandom
15 Mar 2025
Tags
Summary
A tutorial to mimic a basic iOS-style phone screen with notifications and now playing indicator.
Series
- Part 3 of AO3 Work Skin Tutorials
Bookmarked by stickistuffin
08 Jun 2025
Bookmarker's Tags:
Bookmarker's Notes
How to make an un interactive phone screen
-
AO3 Work Skin for In-Universe Investigative/Mission Report With Redaction by wafflelate
Fandoms: No Fandom
11 May 2020
Tags
Summary
This work provides the CSS and HTML necessary to make a fanfiction look like an investigative report or mission report, suitable for a variety of fandoms and purposes.
-
The Nice and Accurate Guide to Footnotes by Vigs for fersh
Fandoms: Good Omens - Neil Gaiman & Terry Pratchett, Good Omens (TV)
10 Aug 2019
Tags
Summary
If you're writing fanfiction for Good Omens, you may find yourself wanting to include footnotes.
But html can be confusing. What can you do?
Read this guide to find out!
-
Tags
Summary
This is a live example of how an author can create linked footnotes in their work with only a little bit of HTML and no workskins required. This is best viewed by clicking "Entire Work". While I've included the actual coding in bold and italic once you click "Hide Creator's Style", there's a more detailed explanation here.
EDIT 6/28/17: The third chapter now shows how to use anchor links as an index/table of contents.
Series
- Part 6 of AO3 Work Skins/Tutorials
-
Tags
Summary
Various fun CSS effects. Outlined text, shadow, condensed, expanded, blurry, even blurrier, smeared, mirrored, upside down, rainbow, neon, and highlight. Probably more to come! All of these are free to use and you do not need to credit me at all. Have fun formatting your works! <3
Series
- Part 1 of My Code Snippets
-
Tags
Summary
Would you like to put a spoiler bar over some text and then have that bar go away when the reader hovers or clicks said text? Well, here you go!
-
How to create your work skins to have colored text by Goddess_of_the_arena
Fandoms: css - Fandom, Work Skins - Fandom, HTML - Fandom, AO3 help - Fandom
22 Feb 2025
Tags
Summary
This is a guide to make text in color, be it for a single word, a full paragraph, several paragraphs in a row, or even the whole chapter, also in different sizes. The tutorial also contains ready-to-use codes for you to add to your work skins.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 is for pure colored text.
CHAPTER 2 is for text in gradient color, both linear gradient and radial gradient.
CHAPTER 3 contains the steps to combine gradient background with gradient text. It also contains the links to each of the other guides of my CSS GUIDES series
CHAPTER 4 contains the links to eight sites where you can create your gradients and get the ready-to-copy code to paste in the CSS code of the workskin.Series
- Part 1 of CSS GUIDES
-
How to create a work skin for glitch effect, mirror text, vertical text and upside down text by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, AO3 help - Fandom, Work Skins - Fandom
22 May 2025
Tags
Summary
This guide contains the codes for text with a glitching effect similar to the Zalgo font, mirror text, upside down text and vertical text, also in color and with new fonts. It also contains the codes to customize your blockquote with colored borders (left side, right side, top border, bottom border, also in gradient effect), colored background (also in gradient effect) and different margin values.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 is for the text with glitching effect similar to the Zalgo font.
CHAPTER 2 is for the mirror effect, vertical text and upside down text.
CHAPTER 3 is to create a negative mirror text effect in black and white with the text side by side.
CHAPTER 4 is to give your blockquote a colored side border, top border or bottom border (also in gradient colors), a colored background (also in gradient colors) and different margin values.Series
- Part 4 of CSS GUIDES
-
CSS in Testing by InfinitysWraith
Fandoms: Ao3 Skins - Fandom, Work Skins - Fandom, css - Fandom
18 Apr 2022
Tags
Summary
This is a flaming dumpster filled with CSS and HTML experiments. It's not instructional, but I post the code and my own explanations for both our sakes. Feel free to steal the code or ask me questions- I don't know what I'm doing. :)
(Pics are mine though)
Chapter 5 is probably what you're looking for ;)
I'm not going to say I take requests, but I'm always looking for inspiration.
It seems I've broken Ao3 yet again. I can no longer add more code to my work skin so we're moving on to part two!
Series
- Part 1 of CSS in Testing
-
This work isn't hosted on the Archive so this blurb might not be complete or accurate.
Tags
Summary
- Bookmarks:
- 1
-
Permablocking Specific Tags - Site Skin by Eli0t
Fandoms: Fandom - Fandom, AO3, No Fandom
10 Aug 2023
Tags
Summary
It finally exists. You can block any tag you want forever! You no longer need 3rd party extensions for this!
Series
- Part 1 of AO3 Skins
- Part 1 of :has() selector