Avoid Using Inline Styles

This is easily the most common mistake I see new sheet authors making. And there’s no way to sugar-coat this, it is a mistake. It’s the worst kind of mistake – it’s the sort that is technically allowed, and it won’t break your sheet. But it makes everything harder – for you and for anyone else who takes over your sheet after you leave Roll20.

If you don’t know what I’m talking about, I’m talking about this:

<span style="text-align:center">Roll</span>
<span style="text-align:center">Level</span>
<span style="text-align:center">Attribute</span>
<span style="text-align:center">Misc</span>
<span style="text-align:center">Points</span>Code language: HTML, XML (xml)

Notice how the styles all say the same thing? Its unnecessary duplication. This code easily be

<span class="skill">Roll</span>
<span class="skill">Level</span>
<span class="skill">Attribute</span>
<span class="skill">Misc</span>
<span class="skill">Points</span>Code language: HTML, XML (xml)

With a CSS entry that looks like:

span.class {
   text-align:center;
}Code language: CSS (css)

Making Changes Easier

Now you might say, what is the point of that? You’ve just swapped one set of duplication for another?

That’s a reasonable question, but imagine you wanted to make all those entries bold, and make them 14px height. In the original style version you’d have to do this:

<span style="text-align:center; font-weight: bold; font-size: 14px">Roll</span>;Code language: HTML, XML (xml)

And then you’d have to copy that to every span listed there. Whereas with the CSS version, you only have to add the change once, in one place:

span.skill {
   text-align:center;
   font-weight: bold;
   font-size: 14px;
}Code language: CSS (css)

And all those spans are updated instantly and automatically. It’s also a lot more readable.

One thing you might find yourself doing is tweaking the styles, making small changes and seeing how it looks. Using the inline style method is genuinely painful because you might have to update the code in a dozen places – or more! With the CSS version, you just change it once, in one place.