Actions

Work Header

Rating:
Archive Warning:
Fandoms:
Additional Tags:
Language:
English
Stats:
Published:
2025-01-26
Completed:
2025-08-15
Words:
2,174
Chapters:
12/12
Comments:
58
Kudos:
54
Bookmarks:
59
Hits:
1,328

How to target specific elements of your work (for work skins)

Summary:

This is a guide to help you precisely target elements in your work skins using CSS selectors. It doesn't focus on styling or adding cool effects!! This guide teaches you how to identify and select the exact elements you want to style.

CHAPTER 1 - Work Title
CHAPTER 2 - Author Name
CHAPTER 3 - Summary
CHAPTER 4 - Notes Part 1
CHAPTER 5 - Notes Part 2
CHAPTER 6 - Gifts
CHAPTER 7 - Inspired By
CHAPTER 8 - Chapter Title
CHAPTER 9 - Series
CHAPTER 10 - Selecting Multiple Headings
CHAPTER 11 - Body Text
CHAPTER 12 - Preface Group

Note: This guide contains custom CSS. It's not necessary for the guide, it's only cosmetic. If you want to disable it, click "Hide Creator's Style" at the top.

Notes:

I figured these out by using Inspect Element and playing around with work skins. I'm an amateur at CSS, so things might not work exactly as expected.
This work is going to be updated and edited multiple times (whenever I discover a cool new feature) so keep that in mind.
I hope this helps!

(See the end of the work for more notes and other works inspired by this one.)

Chapter 1: Work Title

Notes:

(See the end of the chapter for notes.)

Chapter Text

Welcome to this tutorial!! If you're new to CSS, here are some links to refer to!!

Here are some more references on how to target specific elements in a work!! They cover a lot of things I haven't in this guide, so check them out for sure!!

I'll be using red and magenta as the text colors for demonstration purposes. Remember that you can format it however you want. This tutorial is just for demonstrating how to target different elements in your work using CSS selectors.

Copy and paste the code into the 'CSS' field, and replace 'color:red;' or any other sample text I've provided with your own formatting.

Things we'll be covering in this chapter:

Let's begin!

Work Title

Method 1:

#workskin h2.title {
color: red;
}

Method 2:

#workskin h2.title.heading {
  color: red;
}

Result:

Method 3:

#workskin h2 {
  color: red;
}

Result:

This works in the same way as Method 1 and 2. However, if you have any other text using the <h2> tag (“this is a title” in the example above), that will get styled as well.

Archive Lock Image

#workskin h2.title img {
  border: 5px solid red;
}

Result:

Next chapter: Styling the Author Name!

Notes:

Edit 11/2/25 - Added more references
Edit 11/4/25 - Added another reference
Edit 17/8/25 - Added 2 more references