# CSS Cheat sheet: Unleashing the Power of Styles and Layouts - Your Ultimate Quick Reference Guide

# CSS Mastery Guide 🔥

## Text Styles

### Color
```css
color: #RRGGBB;
```

### Font
```css
font: italic small-caps bold 16px/1.5 "Helvetica", sans-serif;
```
- **font-family**
```css
font-family: "Times New Roman", serif;
```
- **font-size**
```css
font-size: 18px;
```
- **font-weight**
```css
font-weight: bold;
```

### Text Alignment
```css
text-align: center;
```

### Text Decoration
- **Underline**
```css
text-decoration: underline;
```
- **Line-through**
```css
text-decoration: line-through;
```

### Line Height
```css
line-height: 1.5;
```

### Letter Spacing
```css
letter-spacing: 2px;
```

## Box Model

### Width & Height
```css
width: 200px;
height: 150px;
```

### Margin
```css
margin: 10px 20px 15px 5px;
```

### Padding
```css
padding: 5px 10px;
```

### Border
- **Border Width**
```css
border-width: 2px;
```
  - **Top**
  ```css
  border-top-width: 2px;
  ```
  - **Right**
  ```css
  border-right-width: 2px;
  ```
  - **Bottom**
  ```css
  border-bottom-width: 2px;
  ```
  - **Left**
  ```css
  border-left-width: 2px;
  ```

- **Border Color**
```css
border-color: #RRGGBB;
```
  - **Top**
  ```css
  border-top-color: #RRGGBB;
  ```
  - **Right**
  ```css
  border-right-color: #RRGGBB;
  ```
  - **Bottom**
  ```css
  border-bottom-color: #RRGGBB;
  ```
  - **Left**
  ```css
  border-left-color: #RRGGBB;
  ```

- **Border Radius**
```css
border-radius: 10px;
```
  - **Top-Left**
  ```css
  border-top-left-radius: 10px;
  ```
  - **Top-Right**
  ```css
  border-top-right-radius: 10px;
  ```
  - **Bottom-Left**
  ```css
  border-bottom-left-radius: 10px;
  ```
  - **Bottom-Right**
  ```css
  border-bottom-right-radius: 10px;
  ```

## Positioning

### Position
```css
position: relative;
```

### Top, Right, Bottom, Left
```css
top: 10px;
right: 20px;
bottom: 15px;
left: 5px;
```

## Layout

### Display
```css
display: block;
```

### Visibility
```css
visibility: hidden;
```

### Float
```css
float: left;
```

### Clear
```css
clear: both;
```

## Flexbox

### Flex
```css
display: flex;
```

### Flex Direction
```css
flex-direction: row;
```

### Flex Wrap
```css
flex-wrap: nowrap;
```

### Justify Content
```css
justify-content: space-between;
```

### Align Items
```css
align-items: center;
```

## Grid Layout

### Grid Template Columns & Rows
```css
grid-template-columns: 100px 200px;
grid-template-rows: 50px 100px;
```

### Grid Column & Row
```css
grid-column: 1 / span 2;
grid-row: 1 / span 2;
```

### Grid Column & Row Gap
```css
grid-column-gap: 10px;
grid-row-gap: 15px;
```

## Colors and Background

### Background Color
```css
background-color: #RRGGBB;
```

### Background Image
```css
background-image: url('path/to/image.jpg');
```

### Background Repeat
```css
background-repeat: no-repeat;
```

### Background Position
```css
background-position: center top;
```

### Background Size
```css
background-size: cover;
```

### Opacity
```css
opacity: 0.7;
```

## Transitions and Animations

### Transition
```css
transition: property duration timing-function delay;
```

- **Transition Property**
```css
transition-property: width;
```
- **Transition Duration**
```css
transition-duration: 0.5s;
```
- **Transition Timing Function**
```css
transition-timing-function: ease-in-out;
```
- **Transition Delay**
```css
transition-delay: 0.2s;
```

### Animation
```css
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
```

- **Animation Name**
```css
animation-name: slide;
```
- **Animation Duration**
```css
animation-duration: 2s;
```
- **Animation Timing Function**
```css
animation-timing-function: ease-in-out;
```
- **Animation Delay**
```css
animation-delay: 0.5s;
```
- **Animation Iteration Count**
```css
animation-iteration-count: infinite;
```
- **Animation Direction**
```css
animation-direction: alternate;
```
- **Animation Fill Mode**
```css
animation-fill-mode: forwards;
```
- **Animation Play State**
```css
animation-play-state: running;
```

## Others

### z-index
```css
z-index: 1;
```

### Box Sizing
```css
box-sizing: border-box;
```

### Overflow
```css
overflow: hidden;
```
- **Overflow X**
```css
overflow-x: auto;
```
- **Overflow Y**
```css
overflow-y: scroll;
```

### Cursor
```css
cursor: pointer;
```

### Box Shadow
```css
box-shadow: 5px 5px 10px #888888;
```



## Learning Resources 📚

1. [MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS)
2. [W3Schools](https://www.w3schools.com/css/)
3. [freeCodeCamp](https://www.freecodecamp.org/learn/)
4. [CSS-Tricks](https://css-tricks.com/)
5. [Flexbox Froggy](https://flexboxfroggy.com/)
6. [Grid Garden](https://cssgridgarden.com/)


Happy coding! 🚀