Workskin Guide

This guide seeks to explain the basics of ao3 Workskins, and provide guides for specific formatting techniques, with a heavy focus on formatting used for Undertale/Deltarune fics.
Archive of Our Own formats works with HTML. As a part of this, it allows users to use CSS to add custom styles using workskins.

Creating a workskin

To create a workskin, click on the 'skins' button on the sidebar. Then, click on the 'My Work Skins' button and click 'Create Work Skin'. From here, you can add your very own CSS rules. To attach a workskin to a work, scroll down to 'Associations' in the Fic creation/edit menu. There will be a box called 'Select work skin'. Click on it, then select your desired skin from the drop down.

Basic Formatting

CSS rules are added as classes, like so:

#workskin .your-class {
   /* Rule Goes here */
}

To apply the rule to your work, simply set the class of any of the tags you wish to be formatted to 'your class'.

<p class="your-class">Text formatted with your class!</p>

Text Highlighting

Highlighting text is one of the most common techniques used. It can be done quite easily.

#workskin .red {
 color: #ff0033ff;
}

Then, within the HTML of your work, simply wrap the text you wish to highlight in a 'span' tag.

<span class="red">Highlighted Text</span>

Highlighted Text

Types of spacing.

CSS provides several distinct types of spacing.

Name	Explanation
Pixel (px)	Represents one single pixel on the screen.
Percentage (%)	Relative to the size of the parent element
em	Relative to font size
rem	Relative to the font size of the root html element

Note on Compatibility and Accessibility

While it is not possible to make your formatting work for every single person, it is still important to consider accessibility. A large number of people read on mobile phones, so your fic should almost always be tested on mobile. Also try to consider site skins, as these can affect the readability of certain elements, such as coloured text. All guides listed should work on all major platforms and browsers, unless otherwise specified.

Testing your Formatting

If you are on a computer, you can check how your Work Skin will look on mobile by pressing ctrl+shift+m on most browsers.

Often, you will want to view how your formatting looks, without dealing with ao3. The simplest way to do this is to test within a draft, however this is both inconvenient and inelegant. It is possible to create a sandbox, which allows you to see how your formatting will look locally.