cheetsheetz/CSS.md

CSS3 Cheat Sheet

Table of Contents

1. Selectors
2. Box Model
3. Colors and Backgrounds
4. Text Styling
5. Fonts
6. Flexbox
7. Grid
8. Transitions
9. Transforms
10. Animations
11. Media Queries
12. Viewport
13. Floats
14. Positioning
15. Display Property
16. Box Sizing
17. Custom Properties (CSS Variables)
18. CSS Grid Layout
19. Filter Effects
20. Clipping and Masking

Selectors

/* 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

/* 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

/* Color */
body {
    color: #ecf0f1;
}

/* Background Color */
body {
    background-color: #3498db;
}

/* Background Image */
body {
    background-image: url("background.jpg");
}

Text Styling

/* Font Size */
p {
    font-size: 16px;
}

/* Font Weight */
.bold-text {
    font-weight: bold;
}

/* Text Decoration */
.underline-text {
    text-decoration: underline;
}

Fonts

/* 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

/* Flex Container */
.container {
    display: flex;
}

/* Justify Content */
.container {
    justify-content: space-between;
}

/* Align Items */
.container {
    align-items: center;
}

Grid

/* 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

/* Transition Property */
button {
    transition: background-color 0.3s ease;
}

/* Hover Effect */
button:hover {
    background-color: #e74c3c;
}

Transforms

/* Rotate */
.rotated-box {
    transform: rotate(45deg);
}

/* Scale */
.scaled-box {
    transform: scale(1.5);
}

Animations

/* Keyframes Animation */
@keyframes slide {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Apply Animation */
.slider {
    animation: slide 1s ease-in-out;
}

Media Queries

/* Responsive Font Size */
@media only screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

Viewport

/* Viewport Settings */
meta {
    width: device-width;
    initial-scale: 1.0;
}

Floats

/* Float Left */
.float-left {
    float: left;
}

Positioning

/* Absolute Positioning */
.absolute-position {
    position: absolute;
    top: 10px;
    left: 20px;
}

Display Property

/* Inline Block */
.inline-block {
    display: inline-block;
}

Box Sizing

/* Border-Box */
box-sizing: border-box;

Custom Properties (CSS Variables)

/* 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

/* 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

/* Grayscale Filter */
.image-container {
    filter: grayscale(50%);
}

Clipping and Masking

/* Clip Path */
.clipped-element {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}