Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Additional Tags:
Language:
English
Stats:
Published:
2022-03-28
Words:
449
Chapters:
1/1
Kudos:
2
Bookmarks:
5
Hits:
169

AO3 Style Guide (WIP)

Summary:

Is your CSS on AO3 displaying differently from the CSS in your CSS editor?
Well, then, do I have something for you!

This work contains CSS classes that you can put in your CSS in order to have your preview window in your CSS editor to match the AO3 style more accurately.

This is a work in progress.

Notes:

This CSS only covers the SIGNIFICANT properties that make up AO3's CSS.

When using "Inspect Element":
- strikethrough - Overwritten by another rule.
- Grayed out - Can mean one of the following:
1. It's a default rule/property that the browser applies. (includes short-hand properties)
2. Involves inheritance of properties

DO NOT USE CSSCOMB AS A BEAUTIFIER. It will mess up the comment ordering.

Work Text:

body {
  font: 100%/1.125 'Lucida Grande','Lucida Sans Unicode','GNU Unifont',Verdana,Helvetica,sans-serif;
}

h3 {
  font-family  : Georgia,serif;
  /* --- Sets font-family for the h3. */
  font-size    : 1.286em;
  /* --- Sets the font-size of the h3. */
  line-height  : 1;
  /* --- Sets the line-height of the h3. */
  margin       : 0.5375em 0;
  /* --- Sets the amount of space around the h3. */
  padding      : 0.125em;
  /* --- Sets the amount of space around the contents of h3. */
  word-break   : break-word;
  /* --- Sets whether line breaks appear wherever the text would otherwise overflow the h3. */
  border-bottom: 0.25em double #333;
  /* --- Sets the bottom border of the h3. */
}

h4 {
  font-size  : 1.143em;
  /* --- Sets the font size of the h4. */
  font-weight: 700;
  /* --- Sets the font weight of the h4. */
  line-height: 1.125;
  /* --- Sets the line height of the h4. */
  margin     : 0.5em 0;
  /* --- Sets the amount of space around the h4. */
}

a,
a:link,
a:visited:hover {
  text-decoration: none;
  /* --- Removes the default underline. */
  color          : #111;
  /* --- Sets the color of the anchor link. */
  border-bottom  : 1px solid;
  /* --- Sets how the bottom border of the element will appear. */
}

blockquote {
  margin-inline-start:1.5em
  /* --- Sets the amount of space between the start of the line and the start of the blockquote. */
  padding            : 0.75em;
  /* --- Sets the amount of space arouund the text.*/
  border-inline-start: 2px solid #999;
  /* --- Sets how the blockquote border will appear. */
  margin             : 0.643em;
  /* --- Sets the amount of space around the blockquote. */
  font               : 1em 'Lucida Grande','Lucida Sans Unicode',Verdana,Helvetica,sans-serif;
  /* --- Sets the font of the blockquote. */
}

ul {
  margin : 1.125em auto;
  /* --- Sets the amount of space around the ul. */
  padding: 0 1em;
  /* --- Sets the amount of space around the contents of the ul. */
}

li,
ol ul li {
  font-weight        : normal;
  /* --- Sets the font weight of each list item. */
  display            : list-item;
  /* --- Sets how each list item will be displayed. */
  list-style-type    : disc;
  /* --- Sets the bullet style for each list item. */
  margin-block-start : 0.75em;
  /* --- Sets the amount of space before each list item. */
  margin-inline-end  : 0;
  /* --- Sets how the amount of space at the end of each list item (or sets how long the list items will be). */
  margin-block-end   : 0.75em;
  /* --- Sets the amount of space after each list item. */
  margin-inline-start: 1.75em;
  /* --- Sets the amount of space before each list item (or how left each list item begins). */
}

small,
sub,
sup {
  font-size: 87.5%;
  /* --- Sets the font size. */
}

b,
strong {
  font-weight: bold;
  /* --- Sets the font weight. */
}

pre {
  white-space: pre-wrap;
  /* --- Sets whether the contents will wrap to the next line. */
}

p {
  line-height: 1.5;
  /* --- Sets the line height of the p. */
  margin     : 1.286em auto;
  /* --- Sets the amount of space around each p. */
  padding    : 0;
  /* --- Sets the amount of space around the text.*/
}

img {
  max-width: 100%;
  /* Sets the maximum width of each image. */
  height   : auto;
  /* Sets the height of each image. */
}