From 044473f1ddfa206fa871ecbcdc5278b451f33f88 Mon Sep 17 00:00:00 2001
From: CSnap <clarence@namenode.xyz>
Date: Sun, 19 Nov 2023 07:53:08 +0000
Subject: [PATCH] Added CSS sheet.

---
 CSS.md    | 321 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 README.md |   1 +
 2 files changed, 322 insertions(+)
 create mode 100644 CSS.md

diff --git a/CSS.md b/CSS.md
new file mode 100644
index 0000000..3386c31
--- /dev/null
+++ b/CSS.md
@@ -0,0 +1,321 @@
+# CSS3 Cheat Sheet
+
+## Table of Contents
+
+1. [Selectors](#selectors)
+2. [Box Model](#box-model)
+3. [Colors and Backgrounds](#colors-and-backgrounds)
+4. [Text Styling](#text-styling)
+5. [Fonts](#fonts)
+6. [Flexbox](#flexbox)
+7. [Grid](#grid)
+8. [Transitions](#transitions)
+9. [Transforms](#transforms)
+10. [Animations](#animations)
+11. [Media Queries](#media-queries)
+12. [Viewport](#viewport)
+13. [Floats](#floats)
+14. [Positioning](#positioning)
+15. [Display Property](#display-property)
+16. [Box Sizing](#box-sizing)
+17. [Custom Properties (CSS Variables)](#custom-properties-css-variables)
+18. [CSS Grid Layout](#css-grid-layout)
+19. [Filter Effects](#filter-effects)
+20. [Clipping and Masking](#clipping-and-masking)
+
+## Selectors
+
+```css
+/* Element Selector */
+p {
+    color: #3498db;
+}
+
+/* Class Selector */
+.my-class {
+    font-size: 16px;
+}
+
+/* ID Selector */
+#my-id {
+    background-color: #e74c3c;
+}
+
+/* Attribute Selector */
+input[type="text"] {
+    border: 1px solid #ccc;
+}
+```
+
+## Box Model
+
+```css
+/* Width and Height */
+.box {
+    width: 200px;
+    height: 100px;
+}
+
+/* Padding */
+.padding-box {
+    padding: 20px;
+}
+
+/* Margin */
+.margin-box {
+    margin: 10px;
+}
+
+/* Border */
+.border-box {
+    border: 2px solid #2ecc71;
+}
+```
+
+## Colors and Backgrounds
+
+```css
+/* Color */
+body {
+    color: #ecf0f1;
+}
+
+/* Background Color */
+body {
+    background-color: #3498db;
+}
+
+/* Background Image */
+body {
+    background-image: url("background.jpg");
+}
+```
+
+## Text Styling
+
+```css
+/* Font Size */
+p {
+    font-size: 16px;
+}
+
+/* Font Weight */
+.bold-text {
+    font-weight: bold;
+}
+
+/* Text Decoration */
+.underline-text {
+    text-decoration: underline;
+}
+```
+
+## Fonts
+
+```css
+/* Font Family */
+body {
+    font-family: 'Arial', sans-serif;
+}
+
+/* Google Fonts */
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+body {
+    font-family: 'Open Sans', sans-serif;
+}
+```
+
+## Flexbox
+
+```css
+/* Flex Container */
+.container {
+    display: flex;
+}
+
+/* Justify Content */
+.container {
+    justify-content: space-between;
+}
+
+/* Align Items */
+.container {
+    align-items: center;
+}
+```
+
+## Grid
+
+```css
+/* Grid Container */
+.grid-container {
+    display: grid;
+    grid-template-columns: auto auto auto;
+}
+
+/* Grid Item */
+.grid-item {
+    padding: 20px;
+    text-align: center;
+    border: 1px solid #ccc;
+}
+```
+
+## Transitions
+
+```css
+/* Transition Property */
+button {
+    transition: background-color 0.3s ease;
+}
+
+/* Hover Effect */
+button:hover {
+    background-color: #e74c3c;
+}
+```
+
+## Transforms
+
+```css
+/* Rotate */
+.rotated-box {
+    transform: rotate(45deg);
+}
+
+/* Scale */
+.scaled-box {
+    transform: scale(1.5);
+}
+```
+
+## Animations
+
+```css
+/* Keyframes Animation */
+@keyframes slide {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+/* Apply Animation */
+.slider {
+    animation: slide 1s ease-in-out;
+}
+```
+
+## Media Queries
+
+```css
+/* Responsive Font Size */
+@media only screen and (max-width: 600px) {
+    body {
+        font-size: 14px;
+    }
+}
+```
+
+## Viewport
+
+```css
+/* Viewport Settings */
+meta {
+    width: device-width;
+    initial-scale: 1.0;
+}
+```
+
+## Floats
+
+```css
+/* Float Left */
+.float-left {
+    float: left;
+}
+```
+
+## Positioning
+
+```css
+/* Absolute Positioning */
+.absolute-position {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+}
+```
+
+## Display Property
+
+```css
+/* Inline Block */
+.inline-block {
+    display: inline-block;
+}
+```
+
+## Box Sizing
+
+```css
+/* Border-Box */
+box-sizing: border-box;
+```
+
+## Custom Properties (CSS Variables)
+
+```css
+/* Define Variables */
+:root {
+    --main-color: #3498db;
+    --secondary-color: #e74c3c;
+}
+
+/* Use Variables */
+body {
+    background-color: var(--main-color);
+}
+
+button {
+    background-color: var(--secondary-color);
+}
+```
+
+## CSS Grid Layout
+
+```css
+/* Grid Layout */
+.grid-container {
+    display: grid;
+    grid-template-columns: auto auto auto;
+}
+
+/* Grid Item Styling */
+.grid-item {
+    padding: 20px;
+    text-align: center;
+    border: 1px solid #ccc;
+}
+```
+
+## Filter Effects
+
+```css
+/* Grayscale Filter */
+.image-container {
+    filter: grayscale(50%);
+}
+```
+
+## Clipping and Masking
+
+```css
+/* Clip Path */
+.clipped-element {
+    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
+}
+```
+
diff --git a/README.md b/README.md
index 932de06..d5779c7 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,7 @@
 
 ### A compendium of various technical "cheat sheets".
 
+- [CSS](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/CSS.md)
 - [HTML](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/HTML.md)
 - [JavaScript](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/javascript.md)
 - [JavaScript Object Notation](https://git.namenode.xyz/CSnap/cheetsheetz/src/branch/main/JSON.md)