# 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%);
}
```