Created styling (markdown)

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;
+```