Move usage warning above the example

www/src/pages/styling.mdx

@@ -27,16 +27,18 @@ A webpack plugin is in development that will automatically bundle the styles so
 
 ## Skip including styles
 
-Normally, you'll receive a warning when you forget to include the matching CSS file. If you're implementing all styles yourself, you can disable this warning by setting a root CSS variable matching the package name to 1. Here's an example:
+Normally, you'll receive a warning when you forget to include the matching CSS file. If you're implementing all styles yourself, you can disable this warning by setting a root CSS variable matching the package name to 1.
+
+**Please tread carefully** - in most cases, the styles you import are better to override than remove completely.
+
+Here's an example:
 
 ```css
 :root {
   --reach-dialog: 1;
 }
 ```
 
-Note that you should tread carefully - in most cases, the styles you import are better to override than remove completely.
-
 ## Using a Bundler (webpack, parcel, etc.)
 
 If you are using a module bundler like webpack or parcel, you can import them where you import the component.