<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
        <title>Quink Example - user supplied styles in a style element</title>
        <script type="text/javascript">
            QUINK = {
                params: {
                    toolbar: 'on',
                    styles: '#user-styles'
                },
                ready: function () {
                    QUINK.configureToolbar({
                       groups: [{
                           id: 'style',
                           active: true
                       }],
                    });
                }
            };
        </script>
        <script type="text/javascript" src="../../quink.js"></script>
        <style id="user-styles">
            .red {
                background-color: red;
            }
            .green {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div contenteditable="true">
            Tap the apply styles button in the style tab of the toolbar. This produces the apply styles menu populated using the user supplied style node above.
        </div>
    </body>
</html>

<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
        <title>Quink Example - user supplied styles in a style element</title>
        <script type="text/javascript">
            QUINK = {
                params: {
                    toolbar: 'on',
                    styles: '#user-styles'
                },
                ready: function () {
                    QUINK.configureToolbar({
                       groups: [{
                           id: 'style',
                           active: true
                       }],
                    });
                }
            };
        </script>
        <script type="text/javascript" src="../../quink.js"></script>
        <style id="user-styles">
            .red {
                background-color: red;
            }
            .green {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div contenteditable="true">
            Tap the apply styles button in the style tab of the toolbar. This produces the apply styles menu populated using the style node in the document.
        </div>
    </body>
</html>

Make the example text clearer.
Make the example text clearer.
