1) Include the stylesheet

E.g. add this to the host document’s <head>:

<link rel="stylesheet" href="">

If you are distributing a JavaScript widget, you may add it programatically:

    .setAttribute('href', '');

Alternatively, “@import” Cleanslate into an existing stylesheet or <style> element:


2) Add the class 'cleanslate' to the container html

The cleanslate element will have its styles reset:

  <div class="blah">
      <!-- general content is not affected -->
      <div class="myContainer cleanslate">
          <!-- this content will be reset -->

Or, add the class programatically:


3) Use !important to your css rules

For all of your CSS rules that relate to a cleanslate element or its children, add the keyword !important:

.myContainer a {
    color: orange !important;
.myContainer .someOtherThing {
    font-weight: bold !important;

4) [optional] Set the default styles

Cleanslate automatically applies the following styles to any cleanslate element and its children:

.cleanslate {
    font-family: "Times New Roman", Times, serif !important;
    font-size: medium !important;
    color: black !important;
    line-height: 1 !important;
    direction: ltr !important;
    text-align: left !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: none !important;

If you want to override these default styles, then simply add the new values to your own stylesheet. It’s best to use a CSS selector that is specific to your content, instead of using .cleanslate, in case there are other .cleanslate elements on the page. For example:

.myContainer {
    font-family: Verdana, Arial, sans-serif !important;
    color: #003 !important;

Manipulating styles with JavaScript

You don’t need to use JavaScript to take advantage of Cleanslate. However, if you do want to manipulate a Cleanslated element with JavaScript, then you must be sure to set the !important flag: = "red";                             // WON'T work = "red !important";                  // WON'T work
jQuery(elem).css("border", "red");                    // WON'T work
jQuery(elem).css("border", "red !important");         // WON'T work'color', 'red', 'important');  // WILL work = "border: red !important";        // WILL work
elem.setAttribute("style", "border: red !important"); // WILL work
jQuery(elem).attr("style", "border: red !important"); // WILL work

Two jQuery plugins: ‘Important’ and ‘style’;

Things are only impossible until they're not.
Hannah Louise Shearer