Embarrassing question

I would like to start getting a little fancy with my sheet. I am hoping to add styles in the CSS to apply them to the sheet. To start with, I'm trying to make a style called "bodystat", which I'd like to be red (in this example). I would then like to apply this style to one cell in a table. Here's the HTML <th bodystat>Body:</th> and here's the CSS bodystat { background-color: red; } I have no idea what I'm doing, or why it's not working.

In the css, you need to include .sheet- in front of almost everything, so try .sheet-bodystat as your start and see if that makes it function.

That should be: &lt;th class="bodystat"&gt;Body:&lt;/th&gt; sheet-bodystat{ background-color: red; } I suggest you look at the <a href="https://wiki.roll20.net/Building_Character_Sheets" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets</a> to figure out basics like this.

The proper way would be: &lt;th class="sheet-bodystat"&gt;Body:&lt;/th&gt; .charsheet .sheet-bodystat { &nbsp;&nbsp;&nbsp; background-color: red; } A class is the HTML attribute used to indicate which style to apply to an element. You have to specify in the HTML that the name you're putting in the element is meant to be a class, like how I've shown. However, classes aren't the only way to apply a CSS style, so you also have to specify that it's a class that you're creating on the CSS side, too. That's what the period (".") is for. In CSS, the line before the curly braces is called the selector, and it's the "search query" used to find the element(s) to apply the style to. Like I said, there are a lot of ways to narrow down your search to the specific elements you want. In my example, ".charsheet .sheet-bodystat" I have two classes, each indicated by a period (.charsheet and .sheet-bodystat). The two classes are separated by a space (this is called a descendant combinator), which means we should select the second element (any element with the class "sheet-bodystat"), but only if they're a child of the first element (any element of with class "charsheet"). The character sheet is automatically put into an element with class "charsheet," and I use it as a good practice to make sure only the character sheet is affected by the style. This is also what the "sheet-" prefix that roll20 uses is for. Another type of selector you can use on roll20 is the type selector. This is simply the name of any element you want the style to apply to without exceptions. So, if I want every table header element on my character sheet to italic, I can use this selector: .charsheet th { &nbsp;&nbsp;&nbsp; ... } It's especially important to use the descendant combinator (the space) with .charsheet here, otherwise this style will apply to every table header on the page, and not just in the character sheet. Mozilla has a great introduction to CSS and as well as a CSS reference sheet , if you want to learn more. Hopefully I didn't over complicate this with too much information and you found it helpful.

Thanks everyone. That got me over the hump. Now I'm formatting things. Is it true that changing the colours and text of dropdown menus in Roll20 is very hard?

For example, I'm trying to put this custom dropdown into a table- <a href="https://www.w3schools.com/css/css_dropdowns.asp" rel="nofollow">https://www.w3schools.com/css/css_dropdowns.asp</a> &lt;td&gt;&lt;input type="text" STYLE="color: #1C2833; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #D0D3D4;" name="attr_Skill-1"&gt; &lt;/td&gt; &lt;td class="dropdown" colspan="4"&gt; &lt;button class="dropbtn"&gt;Title&lt;/button name="attr_SkillTitleBody"&gt; &lt;div class="dropdown-content"&gt; &lt;option value="-2" selected&gt;Untrained&lt;/option&gt; &lt;option value="0"&gt;Novice&lt;/option&gt; &lt;option value="1"&gt;Apprentice&lt;/option&gt; &lt;option value="2"&gt;Journeyman&lt;/option&gt; &lt;option value="3"&gt;Master&lt;/option&gt; &lt;option value="4"&gt;Grandmaster&lt;/option&gt; &lt;option value="5"&gt;Grandmaster + 1&lt;/option&gt; &lt;option value="6"&gt;Grandmaster + 2&lt;/option&gt; &lt;option value="7"&gt;Grandmaster + 3&lt;/option&gt; &lt;option value="8"&gt;Grandmaster + 4&lt;/option&gt; &lt;/div&gt; &lt;/td&gt; I assume there's some special sauce needed here.

I've never done that, but I know it has come up on the forums a time or 2.&nbsp; I was able to find one thread on a quick search that may give you some inspiration.&nbsp; <a href="https://app.roll20.net/forum/post/6235913/slug%7D" rel="nofollow">https://app.roll20.net/forum/post/6235913/slug%7D</a>

The syntax of your code is wrong. You are creating a select not a button. And if you were creating a button, the code is all wrong anyway. &lt;td&gt;&lt;input type="text" class="my-input-style" name="attr_Skill-1"&gt; &lt;/td&gt; &lt;td class="dropdown" colspan="4"&gt; &lt;label class="dropbtn" &gt;Title&lt;/label&gt; &lt;select class="dropdown-content"&gt; &lt;option value="-2" selected&gt;Untrained&lt;/option&gt; &lt;option value="0"&gt;Novice&lt;/option&gt; &lt;option value="1"&gt;Apprentice&lt;/option&gt; &lt;option value="2"&gt;Journeyman&lt;/option&gt; &lt;option value="3"&gt;Master&lt;/option&gt; &lt;option value="4"&gt;Grandmaster&lt;/option&gt; &lt;option value="5"&gt;Grandmaster + 1&lt;/option&gt; &lt;option value="6"&gt;Grandmaster + 2&lt;/option&gt; &lt;option value="7"&gt;Grandmaster + 3&lt;/option&gt; &lt;option value="8"&gt;Grandmaster + 4&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; Here's the style from your first input converted into a CSS class input. my-input-style { &nbsp;&nbsp;&nbsp;&nbsp;color: #1C2833; &nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana; &nbsp;&nbsp;&nbsp;&nbsp;font-weight: bold; &nbsp;&nbsp;&nbsp;&nbsp;font-size: 12px; &nbsp;&nbsp;&nbsp;&nbsp;background-color: #D0D3D4; }

By the way, if you plan to publish your sheet for other users, it wont be accepted by the roll20 devs. They dont allow tables for layout, so you'd need to figure out how to use CSS to do the layout. If you are making the sheet for just your own group, you can ignore this. But since it doesnt look like you have read the page Andreas linked, I thought I'd better mention it.

Thanks GiGs, but I'm not planning on releasing this sheet to the community. I don't own any of the IP involved, and I don't want to annoy the IP owners. Plus there's a lot of homebrew stuff in this sheet anyway. No way it'd suit any other group playing this game. Thanks for your correcting me on what I was doing wrong with the button. I was just using the w3school page as reference. My bad.

Ah that makes sense. The w3school page is pretty good for learning the basics of html, but roll20 does have significant differences from what you'll find in most html help sites outside of roll20. Buttons are among them. Personally I'm conflicted about roll20's position on tables, I am not totally in favour of it. But it's very common for people creating new sheets to post them to the github and have them rejected because of this (there was one instance just this week, in fact), so I wanted to mention it just in case.

GiGs, you've got a &lt;/div&gt; there without an opening. Is it supposed to go in the &lt;select...&gt; line?

It is supposed to be a &lt;/select&gt; line, instead of &lt;/div&gt;. I changed the start but forgot to change the end. I'll edit the post.

Thanks. It's not doing what I think you're intending to have it do, but I'm not going to bother you with this one any more. I'll try something else.

Just so you know, this is what worked- &lt;td colspan="4"&gt; &lt;input name="attr_favcolor" type="hidden" class="sheet-color-switch"&gt; &lt;select name="attr_favcolor" class="sheet-basictext""&gt; &lt;option class="sheet-basictext" value="-2" selected&gt;Untrained&lt;/option&gt; &lt;option class="sheet-basictext" value="0"&gt;Novice&lt;/option&gt; &lt;option class="sheet-basictext" value="1"&gt;Apprentice&lt;/option&gt; &lt;option class="sheet-basictext" value="2"&gt;Journeyman&lt;/option&gt; &lt;option class="sheet-basictext" value="3"&gt;Master&lt;/option&gt; &lt;option class="sheet-basictext" value="4"&gt;Grandmaster&lt;/option&gt; &lt;option class="sheet-basictext" value="5"&gt;Grandmaster + 1&lt;/option&gt; &lt;option class="sheet-basictext" value="6"&gt;Grandmaster + 2&lt;/option&gt; &lt;option class="sheet-basictext" value="7"&gt;Grandmaster + 3&lt;/option&gt; &lt;option class="sheet-basictext" value="8"&gt;Grandmaster + 4&lt;/option&gt; &lt;/select&gt; &lt;/td&gt;