Actions

  • Entire Work
  • Hide Creator's Style

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Collections:
Fanfiction Reference Works, A Guide to Coding and Fanworks
Stats:
Published:
2025-11-03
Completed:
2025-11-03
Words:
27,186
Chapters:
33/33
Comments:
20
Kudos:
9
Bookmarks:
9
Hits:
582

Workskin No Workskin

Summary:

Archive-Wide CSS Classes that you can use without a workskin. Nothing really crazy though. Ignore the wordcount.

Notes:

If it's not just p/span and div that are used for demonstration that means the class (most of the time, check the respective stylesheet for it/test it first) works on that certain element/tag.

And if there is any changes made to AO3's stylesheets, any mistakes, duplicates (except for media stylesheets, they're an exception to this), please tell me (Ignore the lorem ipsum, it's just a way for classes to not overlap eachother, hr is not enough unfortunately).

As of writing this I can't use identifiers (Ids).

OTW Front End Docs' Class Taxonomy if you want something a bit more understandable and organized, no demonstrations though.

Current Stylesheets Version: [e031555]

Chapter 1: 01-core

Summary:

01-core.css

Notes:

(See the end of the chapter for notes.)

Chapter Text

p.secondary

div.secondary p

(Class): secondary
(Lorem): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque justo mi, commodo id consectetur quis, pharetra eget nibh. Nunc laoreet ante et quam porttitor, ac lacinia libero gravida.

p.dropdown

div.dropdown p

(Class): dropdown
(Lorem): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque justo mi, commodo id consectetur quis, pharetra eget nibh. Nunc laoreet ante et quam porttitor, ac lacinia libero gravida.

p.heading

div.heading p

(Class): heading
(Lorem): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque justo mi, commodo id consectetur quis, pharetra eget nibh. Nunc laoreet ante et quam porttitor, ac lacinia libero gravida.

p.landmark

div.landmark p

(Class): landmark
(Lorem): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque justo mi, commodo id consectetur quis, pharetra eget nibh. Nunc laoreet ante et quam porttitor, ac lacinia libero gravida.

(Class): hidden
(Lorem): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque justo mi, commodo id consectetur quis, pharetra eget nibh. Nunc laoreet ante et quam porttitor, ac lacinia libero gravida.

  • ul li.blurb

(Class): blurb
(Lorem): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque justo mi, commodo id consectetur quis, pharetra eget nibh. Nunc laoreet ante et quam porttitor, ac lacinia libero gravida.

  • div.blurb ul li

(Class): blurb
(Lorem): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque justo mi, commodo id consectetur quis, pharetra eget nibh. Nunc laoreet ante et quam porttitor, ac lacinia libero gravida.

p.actions span

div.actions div p

(Class): actions
(Lorem): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque justo mi, commodo id consectetur quis, pharetra eget nibh. Nunc laoreet ante et quam porttitor, ac lacinia libero gravida.

p.stats span

div.stats div p

(Class): stats
(Lorem): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque justo mi, commodo id consectetur quis, pharetra eget nibh. Nunc laoreet ante et quam porttitor, ac lacinia libero gravida.

  • div.meta ul li

(Class): meta
(Lorem): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque justo mi, commodo id consectetur quis, pharetra eget nibh. Nunc laoreet ante et quam porttitor, ac lacinia libero gravida.

Notes:

Please tell me on how to isolate these classes!