Guide to CSS – Styling a Character Sheet

Use HTML to build the essential functions of a sheet, then CSS to style it to make it presentable. With these two guides, you can create attractive character sheets, and everything else is optional.

The articles here cover “everything you need to know” to design a Roll20 character sheet and a lot more. Each chapter focuses on a specific kind of thing you need to know to build a sheet.

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.

Other CSS Posts

There are a lot more CSS things that aren’t fundamental to understanding CSS and making character sheets. Handy tips and tricks, for example. CSS Posts like those are listed here (this list will expand over time).

• Avoid Using Inline Styles
  Inline styles are when you put style: directly in the HTML. Here are the benefits of using CSS instead.
• Divitis and Style
  There's a syndrome among webspages created by those unfamiliar with CSS. Here's to avoid it.
• Don’t Use TABLE – use GRID
  When creating a sheet, don't use TABLE. Learn how to use CSS Grid to EASILY organise your sheet.

If this series whets your appetite, you can check out some of the clever things you can do at the CSS Wizardry page on the Roll20 Wiki (though be warned – some of the code there is very old and needs some rewriting to work properly).