diff --git a/src/content/docs/en/basics/layouts.mdx b/src/content/docs/en/basics/layouts.mdx
index 8dcab7c30648a..11611fa948ab0 100644
--- a/src/content/docs/en/basics/layouts.mdx
+++ b/src/content/docs/en/basics/layouts.mdx
@@ -14,7 +14,7 @@ We conventionally use the term "layout" for Astro components that provide common
 
  But, there is nothing special about a layout component! They can [accept props](/en/basics/astro-components/#component-props) and [import and use other components](/en/basics/astro-components/#component-structure) like any other Astro component. They can include [UI frameworks components](/en/guides/framework-components/) and [client-side scripts](/en/guides/client-side-scripts/). They do not even have to provide a full page shell, and can instead be used as partial UI templates.
 
-However, if a layout component does contain a page shell, its `<html>` element must be the parent of all other elements in the component. All [`<style>`](/en/guides/styling/#styling-in-astro) or [`<script>`](/en/guides/client-side-scripts/#using-script-in-astro) elements must be enclosed by the `<html>` tags.
+However, if a layout component does contain a page shell, its `<html>` element must be the parent of all other elements in the component.
 
 Layout components are commonly placed in a `src/layouts` directory in your project for organization, but this is not a requirement; you can choose to place them anywhere in your project. You can even colocate layout components alongside your pages by [prefixing the layout names with `_`](/en/guides/routing/#excluding-pages).
 
@@ -45,12 +45,13 @@ const { title } = Astro.props;
     </article>
     <Footer />
   </body>
-  <style>
-    h1 {
-      font-size: 2rem;
-    }
-  </style>
 </html>
+
+<style>
+  h1 {
+    font-size: 2rem;
+  }
+</style>
 ```
 
 ```astro title="src/pages/index.astro"
