From 34048e51cbd6bcb15164ec2c663fbad15cb1b8ee Mon Sep 17 00:00:00 2001
From: Kayne Ruse <kayneruse@gmail.com>
Date: Sun, 22 Aug 2021 03:01:05 +1000
Subject: [PATCH] Created styling (markdown)

---
 styling.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 styling.md

diff --git a/styling.md b/styling.md
new file mode 100644
index 0000000..ec1e841
--- /dev/null
+++ b/styling.md
@@ -0,0 +1,35 @@
+# Styling
+
+The MERN-template comes with two raw .css files - `styles.css` and `popup-chat.css`. The former is applied to the front-end as a whole, while the latter applies only the the chat window. Feel free to alter either as you see fit.
+
+If you'd like to customize specific pages without affecting others, this is possible. Under `client/pages/utilities/`, there's a component called `ApplyToBody` which sets the class for the body element, and removes it again when it is destroyed.
+
+This allows the developer to make page-scoped changes in individual .css files, like so:
+
+```css
+body.homepage h1 {
+	font-size: 96pt;
+	color: white;
+	text-shadow: 5px 5px 15px black;
+}
+```
+
+This above CSS will only apply to a page where ApplyToBody has been given the className `homepage`, like so:
+
+```jsx
+import React from 'react';
+import './styles/styles-homepage.css';
+
+const HomePage = props => {
+	return (
+		<>
+			<ApplyToBody className='homepage' />
+			<div className='page'>
+				<h1>Hello World!</h1>
+			</div>
+		</>
+	);
+};
+
+export default HomePage;
+```
\ No newline at end of file