A CSS rule is made up of a selector, and a declaration block.
span {
color: red;
font-weight: bold;
}Code language: CSS (css)In this example, span is the selector – it says, “apply this rule to all spans”.
In the declaration block are two declarations: the first set the colour to red, then the font to bold. Each declaration starts with a property name, then a value, and finally a semi-colon (this is important).
You can include any number of declarations in a single block, and they will be applied to the selector.
This post uses some CSS properties (like font-weight and color) that haven’t been defined yet. Don’t worry, they’ll be described in the next few posts.
About Selectors
You can use HTML Elements like span, h1, and input as selectors, as in the example above. But a selector like this affects every element of that type in the sheet.
This approach is handy to set up an overall style for the sheet – say, all spans are bold, and all divs have a border around them.
div {
border: 1pt solid black;
}
span {
font-weight: bold;
}Code language: CSS (css)But this approach is limited – you usually don’t want to affect all elements of a type. That’s where classes and ids come in.
Different types of input can be targeted separately. You might want text inputs to be emboldened, and number inputs centred.
input[type=text] {
font-weight: bold;
}
input[type="number"] {
text-align: center;
}Code language: CSS (css)Types are enclosed in square brackets [ ], and the specific type (text, number, hidden, etc) can be put in quotes, but it doesn’t need to be. The declaration block above shows both approaches.
You’ll see more of these kinds of modifications of selectors later, in Conditional Selectors. But inputs are so commonly used that this one needed to be demonstrated now.
You can also create classes to target things more precisely. Here’s a span created in HTML with the class “bold”.
<span class="bold">Name</span>Code language: HTML, XML (xml)Now you can apply properties to that span. Let’s say you want to make the text bold:
.bold {
font-weight: bold;
}Code language: CSS (css)Classes are reusable. Any other element in the sheet with the class bold is made bold (if the element supports that property).
This is where classes really shine, and you should take advantage of this.
The real power of CSS comes in where you have the option to combine different selectors to target something more precisely.
You can combine an HTML element and a class with a period like so:
span.bold {
font-weight: bold;
}
input[type=text].bold {
font-weight: bold;
}Code language: CSS (css)Sometimes an element has more than one class; just add more periods.
<span class="bold underline red">Some underlined text this is bold and red</span>Code language: HTML, XML (xml)span.bold {
font-weight: bold;
}
span.underline {
text-decoration: underline;
}
span.red {
color: red;
}
span.bold.underline.red {
font-size: 32px;
}Code language: CSS (css)Here are some generic classes that will be used for different elements, but any Elements that have all three classes use 32-pixel height text – those letters are big!
IDs function like classes with the difference that they must be unique. You can only have one instance of each id.
<span class="bold" id="character-name">Name</span>Code language: HTML, XML (xml)In the CSS, you target ids with the hash symbol.
#character-name {
text-decoration: underline;
}Code language: CSS (css)This CSS underlines the text.
There’s usually no need to combine ids with elements or classes. An id is always unique, so it already targets one specific element. (Though see Hierarchy and Specificity for a use-case.)
IDs are part of the CSE upgrade to Roll20 and are not supported if you are using Legacy code.
If you apply the same code to multiple selectors, you can group them. So instead of doing this:
h1 {
font-weight: bold;
text-decoration: underline;
}
h2 {
font-weight: bold;
text-decoration: underline;
}Code language: CSS (css)You can do this:
h1,
h2 {
font-weight: bold;
text-decoration: underline;
}Code language: CSS (css)Be careful: each selector before the last one must have a comma after it, or the code won’t work.
One thing to be aware of is the ordering of declaration blocks in your CSS file. Later blocks will overwrite earlier ones if they have the same name.
span {
font-weight: bold;
color: red;
}
/* a bunch more blocks between these */
span {
color: blue;
}Code language: CSS (css)As your CSS file gets bigger, it’s possible to create declaration blocks that apply to the same elements and negate parts of an earlier block.
In the example above, spans will be bold, but their text will be blue. The bold from the first one is kept because the later block didn’t touch that.
Also, if you have a syntax error in your CSS, that block and every block after it will fail, and won’t be applied. So if your CSS doesn’t seem to be applying, it’s a good idea to check the CSS is valid, and that you don’t have a duplicate block.
Overriding Roll20’s Inbuilt Styles
Roll20 already has some default styles applied to elements, and you’ll need to override them to apply your own style. The chapter on Inheritance and Specificity will show you how to do that.
Comments
One of the blocks above included a comment. As with HTML, you can enter comments in CSS, but the syntax is different.
.bio span {
text-decoration: underline;
/* this property underlines text */
}Code language: CSS (css)Comments in CSS start with /* and end with */.
