[next] Doc Updates

site/pages/10--docs/20--basics/90--assets.rocket.md

@@ -49,7 +49,7 @@ export default () => html`<img src="../path/to/your/image.jpg" alt="My Image" />
 
 ## Static Assets
 
-Oftentimes, you have files such as robots.txt, .htaccess (redirects), favicons, etc. that do not need to be in your `src/` directory. For these types of files that simply need to be copied to the built site you will want to place them in your `site/public/` folder. Anything is this folder will be copied over into the built site completely untouched.
+Oftentimes, you have files such as robots.txt, .htaccess (redirects), favicons, etc. that do not need to be in your `src/` directory. For these types of files that simply need to be copied to the built site you will want to place them in your `site/public/` folder. Anything in this folder will be copied over into the built site completely untouched.
 
 **Note:** Since these files are simply copied over during the build process, anything you place in the `site/public/` directory will not be optimized, bundled, or minified by Rocket.
 
@@ -68,7 +68,7 @@ Here is an example of css file being imported using the `:resolve` function
 
 ## Node exports
 
-If you package is `"type": "module"` then you can also add exports.
+If your package is `"type": "module"` then you can also add exports.
 
 👉 `package.json`
 

site/pages/10--docs/30--guides/70--styles-and-css.rocket.md

@@ -0,0 +1,58 @@
+```js server
+/* START - Rocket auto generated - do not touch */
+export const sourceRelativeFilePath = '10--docs/30--guides/70--styles-and-css.rocket.md';
+import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js';
+export { html, layout, setupUnifiedPlugins };
+/* END - Rocket auto generated - do not touch */
+```
+
+# Styles And CSS
+
+Styles with Rocket can be as simple or as complex as you'd like them to be. In this guide we'll go through a few of the different approaches available to you when it comes to styling a site built with Rocket.
+
+## Approaches to Styling
+
+### 1. Simple `<link>` Tags and External Files
+
+...
+
+### 2. Global CSS Template Literals
+
+...
+
+### 3. Component Scoped Styles
+
+...
+
+The best part about these 3 approaches and Rocket is you don't have to pick one over the other. You can mix and match them as needed in your project.
+
+## Recommendations & Best Practices
+
+This is where we'll share our recommendations and what we would consider best practices for styles **but by all means choose the approach that works best for your project and your team.**
+
+### Global Styles
+
+Web components work very well with [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) which is why a global.css or base.css file would be a great place to set your site's theme colors, global resets, etc.
+
+Here's an example of some base properties for a theme.
+
+👉 `global.css`
+
+```css
+:root {
+  --theme-bg: #ffffff;
+  --theme-on-bg: #000000;
+  --theme-primary: #d21b1d;
+  --theme-on-primary: #ffffff;
+}
+```
+
+These properties could easily be used to set the body's background color and default text color of the site or within a button component to set the background color of the button and the color of the text in the button.
+
+### Resets
+
+You'll see many differing opinions online about styles that normalize or reset your styles across different browsers. Some of our favorites would be [A Modern CSS Reset](https://piccalil.li/blog/a-modern-css-reset/) and [Normalize CSS](https://necolas.github.io/normalize.css/) but we would recommend you pick what works best for you and your project. (I'm sure you're noticing a trend).
+
+To include your reset styles you can simply place them at the top of your `global.css` file or import them from external `reset.css` file at the top of your `global.css` file.
+
+### Typography

site/pages/pageTreeData.rocketGenerated.json

@@ -719,6 +719,38 @@
               "outputRelativeFilePath": "docs/guides/cross-browser/index.html",
               "sourceRelativeFilePath": "10--docs/30--guides/60--cross-browser.rocket.md",
               "level": 3
+            },
+            {
+              "title": "Styles And CSS | Rocket",
+              "h1": "Styles And CSS",
+              "headlinesWithId": [
+                {
+                  "text": "Styles And CSS",
+                  "id": "styles-and-css",
+                  "level": 1
+                },
+                {
+                  "text": "1. Simple  Tags and External Files",
+                  "id": "1-simple-link-tags-and-external-files",
+                  "level": 2
+                },
+                {
+                  "text": "2.",
+                  "id": "2",
+                  "level": 2
+                },
+                {
+                  "text": "2. Completely Component Scoped",
+                  "id": "2-completely-component-scoped",
+                  "level": 2
+                }
+              ],
+              "name": "Styles And CSS",
+              "menuLinkText": "Styles And CSS",
+              "url": "/docs/guides/styles-and-css/",
+              "outputRelativeFilePath": "docs/guides/styles-and-css/index.html",
+              "sourceRelativeFilePath": "10--docs/30--guides/70--styles-and-css.rocket.md",
+              "level": 3
             }
           ]
         }