Hi there. I've been learning some html and css, and hacking together a sheet. I got some help styling the sheet from my brother who codes for a living and is studying user experience, design, etc. It looks pretty neat, but I can't figure out why it won't work with any CSS styling in roll20. I've of course been reading around, looking at guides that talk about making sure to use .charsheet- and .sheet- or something, but can't seem to figure out what I'm missing. I'll keep trying, but maybe you guys can save me some time? Hoping to run a playtest with it tomorrow and been at it most of the day and week. I'll post the first table code here, and then the css after. Feel like it's likely something simple. Thanks for any help! HTML: <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"/> <link href=" <a href="https://fonts.googleapis.com/css2?family=Girassol&display=swap" rel="nofollow">https://fonts.googleapis.com/css2?family=Girassol&display=swap</a> " rel="stylesheet"> </head> <!-- TABS HTML only --> <!-- ATTRIBUTES --> <div class="entiretable"> <table class="MsoNormalTable" width="240" align="left"> <tr> <th colspan="2" class="firstATRrow">Physical</th> <th colspan="2" class="firstATRrow">Mental</th> <th colspan="2" class="firstATRrow">Derived</th> </tr> <tr> <td class="ATRcolumn">ST</td> <td class="inputArea"> <input type="number" name="attr_strength" placeholder="0" min="-5" max="5"> </td> <td class="ATRcolumn"> WP </td> <td class="inputArea"> <p class="Standard" style="text-align: center;" align="center"><input type="number" name="attr_willpower" style="" placeholder="0" min="-5" max="5"></p> </td> <td class="ATRcolumnTotal" width="45"> <p class="" style="text-align: center;" align="center"> <span style="">AP</span> </p> </td> <td class="inputAreaTotal"> <input type="text" name="attr_actionpoints" style=" font-weight: bold;" placeholder="4"> </td> </tr> <tr > <td class="ATRcolumn"> AG </td> <td class="inputArea"> <input type="number" name="attr_agility" style=" font-weight: bold;" value="0" min="-5" max="5"> </td> <td class="ATRcolumn" style=""> WT </td> <td class="inputArea"> <p class="Standard" style="text-align: center;" align="center"><input type="number" name="attr_wit" style=" font-weight: bold;" value="0" min="-5" max="5"></p> </td> <td class="ATRcolumnTotal"> RF </td> <td class="inputAreaTotal"> <input type="number" name="attr_reflex" value="0" min="-10" max="10"> </td> </tr> <tr style="height: 12.8pt;"> <td class="ATRcolumn"> TG </p> </td> <td class="inputArea"> <input type="number" name="attr_toughness" style=" font-weight: bold;" placeholder="0" min="-5" max="5"> </td> <td class="ATRcolumn"> <p class="Standard" style="text-align: center;" align="center"> <span >PR</span> </p> </td> <td class="inputArea"> <p class="Standard" style="text-align: center;" align="center"><input type="number" name="attr_perception" style=" font-weight: bold;" placeholder="0" min="-5" max="5"></p> </td> <td class="ATRcolumnTotal"> KN </td> <td class="inputAreaTotal"> <!--removed <p> tag from this input and other input fields to fix formatting --> <input type="number" name="attr_knockdown" style=" font-weight: bold;" placeholder="0" min="-5" max="5"> </td> </tr> <tr class="" style=""> <td class="ATRcolumn" style=""> SZ </td> <td class="inputArea"> <input type="number" name="attr_size" style=" font-weight: bold;" placeholder="0" min="-6"> </td> <td style="" class="ATRcolumn"> IN </td> <td class="inputArea"> <input type="number" name="attr_intelligence" style=" font-weight: bold;" placeholder="0" min="-5" max="5"> </td> <td class="ATRcolumnTotal"> KO </td> <td class="inputAreaTotal"> <input class="" type="number" name="attr_knockout" style=" font-weight: bold;" placeholder="0" min="-5" max="5"> </td> </tr> <tr class="tablefooter1"> <td class="ATRcolumnTotal "> PW </td> <td > <input type="number" name="attr_power" style=" font-weight: bold;" placeholder="0"> </td> <td class="ATRcolumnTotal"> BD </td> <td> <p class="Standard" style="text-align: center;" align="center"><input type="number" name="attr_body" style=" font-weight: bold;" placeholder="0"></p> </td> <td class="ATRcolumnTotal" id="move"> Move </td> <td> <input type="text" name="attr_movement" style=" font-weight: bold;" placeholder="5"> </td> </tr> </table> </div> CSS: .charsheet /* <a href="http://meyerweb.com/eric/tools/css/reset/" rel="nofollow">http://meyerweb.com/eric/tools/css/reset/</a> v2.0 | 20110126 License: none (public domain) CSS reset sheet to remove all default styling */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } .charsheet body { line-height: 1; background-color: #C5C3B6 } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-spacing: 0; border-radius: 5px; border-style: solid; border: none; border-color: #352719; background-color: #DBD8CA; -webkit-box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45); box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45); } /* END CSS STYLING RESET PAGE ------------------------------------------- */ .charsheet body { font-family: 'Girassol', cursive; font-size: 1.2em; } td { background: #F2F2F2; padding: 0in .5pt 0in .5pt; height: 12.8pt; } input { width: 80%; font-weight: 800; background: #352719; background-color: #FFFFFF; } .inputArea { background-color: #DBD8CA; } .inputAreaTotal { background-color: default; } .MsoNormalTable { margin: 1em; } .firstATRrow { font-size: 150%; font-weight: 200; padding: .4em; font-family: 'Girassol', cursive; } .secondATRrow {} .ATRcolumn { background-color: #DBD8CA; text-align: center; font-size: 110%; padding: .3em; } .ATRcolumnTotal { font-size: 110%; padding: .3em; background-color: #352719; color: #ffffff; text-align: center; } .spanTitle { font-size: 70%; } .attributeSpan { font-size: 100%; } .tablefooter1 { color: red; } #move { font-size: 100%; } © 2020 GitHub, Inc.