---
heading: Quick start
---

1. Include a `<link>` to cleanslate.css in the host page
2. Add the class `cleanslate` to the HTML container element of the widget
3. Add `!important` to all of the widget's CSS rules
4. (optional) Set the default styles on the widget container

For more details, see the ['Usage' section](/usage/).


# Example

<div class="page">

<section class="mywidget cleanslate">
    This is a widget. Styles are reset
    with Cleanslate, then modified.
</section>

<style>
    .page {
        font-size: 2em;
    }
    .mywidget {
        color: white !important;
        background-color: darkblue !important;
        padding: 2em !important;
    }
</style>
</div>

    <section class="mywidget cleanslate">
        This is a widget. Styles are reset
        with Cleanslate, then modified.
    </section>

    <style>
        .mywidget {
            color: white !important;
            background-color: darkblue !important;
            padding: 2em !important;
        }
    </style>