I think this may have something to do with the way in which you’ve added the CSS and applied it the elements you’re styling.
Basically, there are two things to consider. First up is the CSS itself. These are a simple set of styling instructions, such as font, colour, font size borders, background colours etc. Secondly, there is the application of the styles to individual content elements on your page. At the simplest level. CSS instructions are given a name, which can be the name of the element you’re styling within the page. For example. A typical CSS instruction may look like this:
In this example, the CSS instructions are given the same name as the element being styled (body, h1, and p). If you simply add the css part of the above example to your sparkle page through an embed widget, the styles will be applied on all body, h1 and p elements in your page. To prevent this from happening, Sparkle allows you to paste a complete piece of code that includes the styling elements as well as the content to be styled all within its own html tags. This keeps the styling within the element you place on the page using the embed widget. This is how the above html code looks on a sparkle page:
I can now continue designing the page with other elements that are h1, body and p without having these same CSS styles applied to them.
From your original post, it sounds like you have a piece of styling code that has to be pasted in the head of your page (not a self-contained html element that includes the content). If I’m correct, I think you will have to combine the CSS AND the html content to be styled into a single piece of code that can be added as an embed widget. In pure CSS that is added independently of the content, each style will have a class name instead of an element name. So, instead of having h1 as the style name, you may see something like .heading followed by the styling parameters. For this type of code to work, you have to assign the style to individual elements on your page by adding the class name to the element you wish to style.
My guess is that you have probably got the CSS and the HTML as two separate pieces of code, so to add this successfully to Sparkle, add the embed widget and paste the CSS into the code box IMPORTANT: make sure the css code is wrapped in style tags. Then, immediately under the closing style tag, paste the HTML code. This should contain the content that is to appear on the page, complete with the style selectors already in place. This will create a piece of html code that is independent of any other page element and should appear on your screen within a single container that can be resized and moved just like any other element.