I just completed my CSS series, describing everything you need to know (about CSS) to make a character sheet, with guidance focussed on Roll20. Hopefully people find this useful. Here are the contents:

1. Getting Started with CSS: An introduction to the rest of the series – CSS syntax, what a declaration block is, how to use HTML Elements and classes as a selector, and how to apply properties.
2. How Elements Are Displayed: Understanding how HTML elements interact with each other, and how they are arranged on the page. Explaining the box model and the display property, along with margins, padding, and borders.
3. Images and Colours: How to change the appearance of objects and decorate the sheet – change their colour, make the background pretty, use images as backgrounds, and so on.
4. Text and Fonts: How to present text and those properties associated with text (such as underlining and shadow effects). Also how to use Google Fonts.
5. CSS Grid Layouts: A description of the most relevant parts of CSS Grid, a very valuable technique for arranging entire sheets. This seems complex at first but is really simple to use once you know a few basics.
6. Understanding Selectors: The full range of ways to target declaration blocks, which is necessary to control exactly which styles get applied.
7. Hide and Reveal Things with CSS: a very common technique using selectors to show sections of the sheet only when desired, to set up tabs, or to swap sections.
8. Inheritance and Specificity: How CSS declarations override each other, and how to know which declarations “win” when there’s a clash. This is a vital skill for making Roll20 sheets.
9. Your Own Styles on Roll20: Roll20 presents some specific challenges to styling things and roll buttons. Using the rules taught in previous posts, especially the post on Specificity, you can overcome those challenges and also style some elements of the GUI beyond the character sheet.
10. Advanced Positioning: Understanding the difference between relative and absolute position and making floating panels that are hidden most of the time.
11. Character Sheet – CSS Example: The Castle Falkenstein sheet from the HTML Chapter is upgraded with CSS. This massive post is a detailed description of everything done, using the above posts. See below on the left for its old look, and on the right for its newer look.

Nice write ups GiGs! The thing I'd hit on hard with regard to character sheet CSS and specificity/inheritance is that because of how Roll20's base styles are applied, inheritance is likely to be a risky proposition for applying a style with many properties being impossible to inherit because they are specified by R20's base CSS.

Thanks! And that's a good point. I do rely on inheritance for some things, but I know there are specific elements and properties where it's a bad idea.

I did originally have a list of all the specific properties in roll20's standard declarations and the specficity you need to overrule them, but it ended up being mostly a list of input properties (especially number inputs). i may dig that up again.

This is what I use to clear all the Roll20 default styles.

.ui-dialog .tab-content .charsheet select,
.ui-dialog .tab-content .charsheet textarea,
.ui-dialog .tab-content .charsheet input,
.ui-dialog .tab-content .charsheet .uneditable-input,
.ui-dialog .tab-content .charsheet label,
.ui-dialog .tab-content .charsheet button {
  all: initial;
}

Then you just need to prepend all your css declarations with .ui-dialog .tab-content .charsheet to ensure that your styles will be applied. It's not ideal to inflate the specificity like this, but at least it sets you at an evenly applied specificity level for all your sheet styles.

This is one I don't remember noticing:

.uneditable-input

What is that used on?

IIRC, number inputs (and specifically for the width property) are the only things you need that much specificity on. Am I misremembering?

Yeah, that one probably isn't needed; I think it's a Roll20 form thing.

As for the specificity, yeah, not everything needs that specificity, but I like not having to think about what specificity I need for  a given css declaration while I'm coding. It's nice to not have to ask "am I going to set the width? then I better use this specificity, or no, I can just use a single class".

I get you, that makes sense.

nice