I've been experimenting with Google Sites and trying to incorporate HTML and CSS without using inline styling. I followed some online guides that claimed it could be done by adding an HTML gadget and inserting the code. However, when I tried it, nothing seemed to work as expected.
I checked out a couple of links for guidance:
- Link 1
- Link 2
Oddly enough, when I tested the code from the second link, it worked perfectly. But as soon as I removed the scripting part, the styling failed just like my own code. Here's a simple example I attempted:
Global Version
<style>
#tester {
padding: 100px;
height: 500px;
width: 500px;
border: 1px solid #0F0;
background-color: #ff0000;
}
</style>
<div id="tester">please work 0_0</div>
Inline Version
<div id="tester" style="padding: 100px; height: 500px; width: 500px; border: 1px solid #0F0; background-color: #ff0000;">please work 0_0</div>
Despite following the correct syntax, the formatting is not applied to the div. Switching to inline styling solves the issue, but that defeats the purpose of using the HTML gadget in the first place.
Any insights on what I might be missing?
Additionally, I want to note that the code itself is error-free. My main goal is to figure out how to make the non-inline version work in Google Sites' HTML box.
Edit: Here's a JSFiddle with the test code and desired outcome: