Classes vs Inline Styles

It’s very common for people new to Roll20 sheet building to use Inline Styles. I’m going to talk about why you should not do that, and why using CSS Classes is a lot easier than you might expect and has many benefits.

What Is an Inline Style?

Here’s an example:

<input type="text" <strong>style="width: 45px;"</strong> name="attr_skill" value="0" >
<input type="text" <strong>style="width: 45px;"</strong> name="attr_mod" value='0'>Code language: HTML, XML (xml)

HTML lets you include style commands, inline with the rest of the code – hence inline style.

Here is one big drawback of inline styles. First, imagine you have another 10 inputs just like those, in different places in the code. Now, you decide the width should be 50px – you need to go in and modify all of those bits of code.

Using a Class fixes that. But you need to know how to create one.

How To Create a Class

If you know how to create an inline style, you can create a class, First, where you had style="whatever" write class="name of class", for example:

<input type="text" class="skill-width" name="attr_skill" value="0" >
<input type="text" class="skill-width" name="attr_mod" value='0'>Code language: HTML, XML (xml)

Then in your CSS file, create the CSS class, which looks like this:

.skill-width {
   width: 45px;
}Code language: CSS (css)

This is a CSS declaration. Let’s say you wanted to make all the text red.

.skill-width {
   width: 45px;
   color: red;
}Code language: CSS (css)

and just like that, the text in all 12 of those once-inline-styles is updated instantly. Now whenever you want to change all those styles, you just need to change the code once, in one place, and it is instantly propagated to all code using that class.

CSS Declarations and Specificity

That .skill-width is a CSS Declaration – it declares what the CSS class is called (and, after the curly brackets, what it does).

The big drawback of CSS is in Specificity – how specific is this declaration? HTML code might be an input inside a button which is inside a div which is inside another div,. that button may have a declaration that sets all text colour to blue. You might want that input to retain its red colour.

You can do this. The trick is to make sure that input has higher specificity: the code is more specific about what it applies to. But maybe you only want that to happen to inputs that are inside the inner div which has class called red. For that you could use:

div.red .skill-width {
   width: 45px;
   color: red;
}Code language: CSS (css)

This tells us that any item with a class skill-width that is inside a div with a class red has the above code applied to it. You can learn more about Specificity in its article.

Sometimes Roll20 has code already assigned and you might add some yourself, and you can always override it by making your own code more specific. You can safely override roll20’s native styles by adding this to all your classes: .ui-dialog .charsheet

So, for instance:

.ui-dialog .charsheet .skill-width {
   width: 45px;
   color: red;
}Code language: CSS (css)

Conclusion

There ae other reasons to use classes, but this is the main advantage and is reason enough on its own. It might seem like a pain at first, but the instant you have two or more copies of any styles, you can see the advantage. Always use classes, and set yourself up for easier coding!