Useful styles to include in your content css

<h1>Useful content css</h1>
        <p>The default content css is very basic and unopinionated to allow you as a developer to integrate the styles you want in order to get a good WYSIWYG writing environment.</p>
        <p>That said, here are some tecniques we often implement ourselves that improves the editing experience in TinyMCE</p>
        <p><em>Inspect the source code to see the actual css used</em></p>
        <h2>Improve hr clickability</h2>
        <p>Because the <code>&lt;hr&gt;</code> is often just a 1px gray line, it is very difficult for a user to select and manipulate. By using the <code>::after</code> pseudo element we can create a larger invisible click area greatly improving selectability.</p>
        <hr />

<h2>Paragraphs in table cells</h2>
        <p>A table cell does not intially contain any child elements wrapping the content, but as soon as you hit enter, a paragraph is wrapped around the text within the cell. This paragraph contain both top and bottom margin that makes the cell appear to get way too much padding. Here is how to avoid that

<table style="border-collapse: collapse; width: 100%;" border="1">
            <tbody>
                <tr style="height: 22px;">
                    <td style="width: 50%; height: 22px; vertical-align: top;">Project X</td>
                    <td style="width: 50%; height: 22px; vertical-align: top;">
                        <p>Not finished</p>
                        <p>Need more info</p>
                    </td>
                </tr>
                <tr style="height: 22px;">
                    <td style="width: 50%; height: 22px; vertical-align: top;">Project Y</td>
                    <td style="width: 50%; height: 22px; vertical-align: top;">Completed</td>
                </tr>
            </tbody>
        </table>

<h2>Use box shadow instead of outline for selectable elements</h2>
        <p>By default selectable elements like images, tables and non-editable elements gets a light blue outline using the <code>outline</code> property. On drawback of using <code>outline</code> is that the outline does not follow rounded borders.
        <p><img src="images/yosemite.jpeg" width="390" height="260" /></p>