Using CSS in the html widget

The CSS Class Name allows you to target your CSS code to only affect that widget.  If you added the following to the Unfiltered Html widget's Content and Set the CSS Class Name to my-html-widget, you should see Hello World in orange when viewing that widget.

<style>
    .my-html-widget { color: orange; }
</style>


Hello World!

For the Generic Content widget, you would be limited to Inline CSS similar to the following code.  The Css Class Name could still be set, but the styles that reference it would need to be added to your Site's theme CSS.

<span style="color: orange;">Hello World!</span>

The Generic Content widget is more limited in what it can do as it is intended for wider use (group owners), while the Unfiltered HTML is expected to be used by only the most trusted users as it adds the capability to make changes that could affect the entire site (JavaScript, CSS code that could apply outside that widget, etc).

Thanks Mathew. So as long as all my CSS classes begin with 'my-html-widget' then I should ok styling that one particular widget?

.content-fragment.my-html-widget would be better to ensure my-html-widget is not a class name used somewhere else in the site.  But yes, as long as all your styles start with that you won't run the risk of the styles having an effect outside the widget (unless there is another widget using that same class name on the same page).

.content-fragment.my-html-widget would be better to ensure my-html-widget is not a class name used somewhere else in the site.  But yes, as long as all your styles start with that you won't run the risk of the styles having an effect outside the widget (unless there is another widget using that same class name on the same page).

Awesome, I will be very specific with my class names in that case. Thanks for the help!