<style>
    .local-styling-example {
        background: lightgray;
        color: black;
        font-family: sans-serif;
        font-size: 1rem;
        margin: 0 0 1rem;
        padding: 1rem;
    }

        /* reset local style */
        .local-styling-example * {
            background: transparent;
            border: none;
            color: inherit;
            font-family: inherit;
            font-size: inherit;
            margin: 0 auto;
            padding: 0;
            line-height: 1.5rem;
        }

        .local-styling-example h6 {
            background: black;
            color: lightgray;
            font-size: 1.25rem;
            font-weight: normal;
            text-align: center;
            padding: 0.5rem 1rem;
        }

        .local-styling-example p {
            margin-top: 1rem;
        }
</style>

<div class="local-styling-example">
    <h6> Local Styling example </h6>
    <p>You can see the first local STYLE bar above this block, and the second one inside the container below. To expand them, click and hold the desired STYLE bar in the construction area.</p>
    <blockquote>
        Local styling is used when you need to style only this block. By placing the STYLE tag outside the container, you allow these two parts to be constructed (removed, for example) independently. The style placed inside the container will be removed along with its container.
    </blockquote>

    <style>
        .local-styling-example blockquote {
            border: black 1px solid;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
        }
    </style>
</div>
