update the content

docs/src/docPages/guide/custom-styling.md

@@ -1,19 +1,31 @@
 # Custom styling
 Tiptap is renderless, that doesn’t mean there is no styling provided. You can decided how your editor should look like.
 
-## Option 1: Styling the plain HTML
-The content is rendered as HTML, so you can just use that to add styling:
+## Option 1: Style the plain HTML
+The whole editor is rendered inside of a container with the class `.ProseMirror`. You can use that to scope your styling to the editor content:
 
 ```css
+/* Scoped to the editor */
+.ProseMirror p {
+  margin: 1em 0;
+}
+```
+
+If you’re rendering the stored content somewhere, there won’t be a `.ProseMirror` container, so you can just globally add styling to the used HTML tags:
+
+```css
+/* Global styling */
 p {
   margin: 1em 0;
 }
 ```
 
-## Option 2: Adding custom classes everywhere
-Every node has a `class` option, that you can use to add a custom class to the rendered HTML tag.
+
+## Option 2: Add custom classes
+Most extensions have a `class` option, which you can use to add a custom CSS class to the HTML tag.
 
 ```js
+/* Add custom classes */
 new Editor({
   extensions: [
     Document(),
@@ -28,17 +40,18 @@ new Editor({
 })
 ```
 
-This will be the result then:
+The rendered HTML will look like that:
 
 ```html
 <h1 class="my-custom-heading">Example Text</p>
 <p class="my-custom-paragraph">Wow, that’s really custom.</p>
 ```
 
-## Option 3: Customizing the HTML markup
+## Option 3: Customize the HTML
 You can even customize the markup for every extension. This will make a custom bold extension that doesn’t render a `<strong>` tag, but a `<b>` tag:
 
 ```js
+/* Customizing the markup */
 import Bold from '@tiptap/extension-bold'
 
 const CustomBold = Bold