Archive of Our Own

Chapter Text

INTRODUCTION

An amazing work I used to learn HTML and CSS myself is The Fic Writer's Guide to Formatting by AnisaAnisa. I recommend you check it out if you're looking for an in-depth tutorial of HTML and CSS features or just how to use them. I'll provide an explanation of what I know and what you need to know to create the specific formatting in this work. (Note that the file attachment on the email formatting looks a bit odd on a phone. Not sure how to fix that.)

Below are examples of the formatting I'll explain how to make in here, taken from a fic of mine that I specifically created them for.

I know when I first started out, I thought making something like this required a lot of experience. It actually doesn't, given it only took me around 10 hours total of trial and error to create both formatting types. I'm gonna tell you how to do it without all the fiddling.

MAKING A WORK SKIN

First and foremost, to be able to do any of the work skin stuff, you need to have your own work skin. To do this, go to your profile page, select Skins in the side bar (same section as Dashboard), My Work Skins, and then Create Work Skin. All you need to do for now is just put in a title and press submit.

BASICS OF HTML

When doing anything in HTML, you need to surround text you're applying a specific thing to in <>these</>. For example:

<b>BOLD</b> = BOLD

<i>ITALICS</i> = ITALICS

<p>PARAGRAPH</p> = PARAGRAPH

BREAK<br/> = BREAK

<img src="LINK HERE" width="X" height="X"> = ADDS IMAGE. You don't need to add width and height if you're fine for your image to be the same size the file is.

When using CSS, you'll have to know the following ones:

<span class="NAME OF FORMAT">TEXT HERE</span>

This applies a specific format to the text put into the space. Each format requires you to create it in the Work Skin, which I'll explain how to do later on.

<div class="NAME OF DIV">ANYTHING WITHIN DIV HERE</div>

This starts a new section. You can put the start and end bits anywhere, and everything between them will be in there. This is used for things such as creating a differently-coloured background for a specific section to differentiate between normal text and, for example, an email.

WORK SKIN FORMATTING

Creating the aforementioned text formatting and sections requires the creation of individual things in the Work Skin. Each format and section will have its own settings, and each will look something like this:

#workskin .NAMEHERE {
}

Now, obviously, there are no settings in here. To add settings to modify the text, there are various things you can do. I'll put every one you need to use for this tutorial and an explanation of what it does by my understanding.

color: #000000 = Sets the colour of text. Yes, it has to be the American spelling of colour, I don't think it works otherwise.

font-weight: bold = Makes text bold.

background: #000000 = Sets the colour of the background for the text or section. Creates a basic box.

font-family: sans-serif = Changes the font to whatever is put in there. There are only certain fonts that actually work with this. I suggest looking up what does work.

max-width: 65% = Changes the maximum width of the box. Can use percentages or measurements in px.

min-width: 65% = Changes the minimum width of the box.

width: 65% = Sets the specific width of the box.

font-size: 80% = Changes the size of text. Can use percentages or measurements in px.

text-decoration: underline = Adds underline to text.

margin: 0 auto 15px = Determines the amount of space between the formatting and other elements. 0 auto centres it in whatever it's already in. Specific px measurements change the size of the space.

margin: 10px 15px 20px 25px = This setting out changes specific margins for each side in clockwise order (top, right, bottom, left).

padding: 20px = Like margin but it creates space between text inside an element and the inside borders instead.

padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px = Specifies padding for individual sides.

border-radius: 5px 5px 5px 5px = Creates rounded corners on boxes. The higher the px, the bigger the rounded corners.

text-align: left = Aligns text in a box with a specific direction.

border: 1px solid #000000 = Creates a border for a box/around the text.

border-top: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000 = Specifies borders for each side of a box.

display: table = Makes the element behave like a table. Not entirely sure what that means, but it's necessary for the email formatting.

In order to actually add these to a format, you just need to do something like this:

#workskin .grey2 {
  background: #242424;
  color: #EBEBEB;
  font-family: sans-serif;
  max-width: 65%;
  margin: 0 auto 15px;
  padding-left: 6px;
  padding-right: 6px;
}

The above, when applied as <div class>, creates the background for discord formatting. You need to ensure you put two spaces before every new setting, a semicolon at the end of every setting, and } at the end.

In order to apply a setting only when hovering on an object, you can do this:

#workskin .pinwhite:hover {
  text-decoration: underline;
}

This will add an underline to text only when hovering on it. Any setting in something with :hover will appear only when hovering, so if you want passive settings, put them in a separate setting with the same name, just without :hover.

CONCLUSION

Hopefully by now you know how to go off and create your own things, or at least you've learnt something. Thanks for reading the first bit of my tutorial, and have a lovely day/night!