diff --git a/Global-styles-and-layouts.md b/Global-styles-and-layouts.md
index ed0909e..84bd777 100644
--- a/Global-styles-and-layouts.md
+++ b/Global-styles-and-layouts.md
@@ -4,72 +4,60 @@ This page will answer how to set global styles like
  - CSS resets, such as `* { box-sizing: border-box; margin: 0; padding: 0 }`
  - Any other styles you might want on `<body>` or `<html`>
 
-The easiest way to accomplish it is by using the [`<Head>` component](https://github.com/zeit/next.js#head-side-effects). For example, in `pages/index.js`:
+The easiest way to accomplish it is by using the [`<style jsx global>` tag](https://github.com/zeit/styled-jsx#global-styles) on a component, specifically with [`<Head>`](https://github.com/zeit/next.js#populating-head). For example, in `pages/index.js`:
 
 ```jsx
-import React from 'react'
 import Head from 'next/head'
 export default () => (
-  <Head>
-    <style>{`
+  <div>
+    <Head>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta charSet="utf-8" />
+    </Head>
+    <style jsx global>{`
       body { 
         background: #000;
         font: 11px menlo;
         color: #fff;
       }
     `}</style>
-  </Head>
+  </div>
 )
 ```
 
-When the page is rendered, the `<style>` element will be placed in the `<head>`.
+When the page is rendered, a `<style>` element will be placed in `<head>`.
 
 Now, how do you do this for every page? In Next.js there's no concept of "global layout". Every page in your Next.js project is _complete_ and _self-sufficient_.
 
 If you've used WordPress in the past, it's similar to how every core template page has to invoke `get_header` and `get_footer`.
 
-So, the easiest solution is to have your pages invoke custom header and footer components.
+So, the easiest solution is to have your pages invoke something like a custom header or footer.
+
+Let's say that what you defined above as `pages/index.js` now lives in `components/meta.js`, since that is all it currently contains. You've also created a footer in `components/footer.js` to use across all your pages. Now, you use both in `pages/index.js`:
 
 ```jsx
-import React from 'react'
-import Header from '../components/header'
+import Meta from '../components/meta'
 import Footer from '../components/footer'
 export default () => (
   <div>
-    <Header />
+    <Meta />
     <p>hi there</p>
     <Footer />
   </div>
 )
 ```
 
-For that example, your directory structure would look like:
+For this example, your directory structure would look like:
 
 ```
 components/
-  header.js
+  meta.js
   footer.js
 pages/
   index.js
 ```
 
-Notice that `components/` is completely arbitrary, but I happen to like that structure. Then `components/header.js` can introduce the `<Head>` `<style />`, so that it gets applied to every page:
-
-```jsx
-import React from 'react'
-import Head from 'next/head'
-export default () => (
-  <header>
-    <Head>
-      <style>{`
-        body {
-          color: red
-        }
-      `}</style>
-    </Head>
-  </header>
-)
-```
+Notice that `components/` is completely arbitrary, but I happen to like that structure. Then `components/meta.js` can introduce the `<Head>` with `<style global jsx/>`, so that it can be applied to every page.
 
 It's also possible to create "master layouts" that embed these components on your behalf, by leveraging React's `children` property.
 
@@ -77,7 +65,7 @@ For example, you can introduce `layouts/main.js`:
 
 ```
 components/
-  header.js
+  meta.js
   footer.js
 pages/
   index.js
@@ -88,22 +76,20 @@ layouts/
 and the component can act as a wrapper:
 
 ```jsx
-import React from 'react'
-import Header from '../components/header'
+import Meta from '../components/meta'
 import Footer from '../components/footer'
 export default ({ children }) => (
   <div>
-    <Header />
+    <Meta />
     { children }
     <Footer />
   </div>
 )
 ```
 
-with this in place, your resulting `pages/index.js` can look as follows:
+With this in place, your resulting `pages/index.js` can look as follows:
 
 ```jsx
-import React from 'react'
 import Page from '../layouts/main'
 export default () => (
   <Page>
@@ -113,7 +99,6 @@ export default () => (
 ```
 
 Some notes:
-- JSX escaping can sometimes get in the way of your `<style>` content. If this happens to you, you'll have to use [`dangerouslySetInnerHTML` instead](https://github.com/facebook/react/issues/3496#issuecomment-105676206)
-- How about pages with different global styles? You can configure multiple layouts, or pass props to `<Header>` or `<Page>`. For example, `<Page dark={true}>` to embed styles that set the background to black and the font color to white and then embed a different `<style>` element based on `this.props.dark` within that component.
+- How about pages with different global styles? You can configure multiple layouts, or pass props to `<Meta>` or `<Page>`. For example, `<Page dark={true}>` to embed styles that set the background to black and the font color to white and then embed a different `<style>` element based on `this.props.dark` within that component.
 - How about server rendering? `<Head>` takes care of shipping the underlying `<style>` in the `<head>` automatically when server rendering!
 - If you still want to modify the HTML template for all pages, you can do that by modifying `_document.js` see: https://github.com/zeit/next.js#custom-document
\ No newline at end of file
