Add inline styles section to Styling (withastro#2873)

Co-authored-by: WintrCodes <[email protected]> Co-authored-by: Yan Thomas <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]>
Xetera · Mar 20, 2023 · 8f58358 · 8f58358
1 parent 9b615f3
commit 8f58358
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/src/content/docs/en/guides/styling.mdx b/src/content/docs/en/guides/styling.mdx
@@ -148,6 +148,15 @@ This pattern lets you style child components directly. Astro will pass the paren
 Because the `class` prop includes the child in its parent’s scope, it is possible for styles to cascade from parent to child. To avoid this having unintended side effects, ensure you use unique class names in the child component.
 :::
 
+### Inline styles
+
+You can style HTML elements inline using the `style` attribute. This can be a CSS string or an object of CSS properties:
+
+```astro title="src/pages/index.astro"
+// These are equivalent:
+<p style={{ color: "brown", textDecoration: "underline" }}>My text</p>
+<p style="color: brown; text-decoration: underline;">My text</p>
+```
 
 ## External Styles