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:
Guide to CSS – Styling a Character Sheet 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. 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. 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. 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. 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. Understanding Selectors : The full range of ways to target declaration blocks, which is necessary to control exactly which styles get applied. 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. 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. 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. Advanced Positioning :
Understanding the difference between relative and absolute position and
making floating panels that are hidden most of the time. 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.
The HTML Sheet is very barebones!
A slight improvement!
