CSS Cheat Sheet: Everything You Need to Know in One Place

*               /* Universal selector */
element         /* Selects all elements of a type */
.class          /* Selects elements by class */
#id             /* Selects elements by ID */
element, element /* Grouping selectors */

element {
    margin: 10px;          /* Space outside the element */
    padding: 10px;         /* Space inside the element */
    border: 1px solid #000; /* Border around the element */
    width: 100px;          /* Element width */
    height: 100px;         /* Element height */
    box-sizing: border-box; /* Includes padding/border in width and height */
}

element {
    font-family: Arial, sans-serif;   /* Font family */
    font-size: 16px;                  /* Font size */
    font-weight: bold;                /* Font weight (bold, normal) */
    font-style: italic;               /* Italic text */
    text-align: center;               /* Aligns text (left, right, center) */
    color: #333;                      /* Text color */
    line-height: 1.5;                 /* Line spacing */
    text-transform: uppercase;        /* Text case (uppercase, lowercase) */
    text-decoration: underline;       /* Underline text */
}

element {
    background-color: #f0f0f0;  /* Background color */
    background-image: url('image.jpg'); /* Background image */
    background-size: cover;     /* Adjust background image size */
    background-position: center; /* Position the background image */
    background-repeat: no-repeat; /* Prevent image from repeating */
}

.container {
    display: flex;                    /* Set flex container */
    justify-content: center;          /* Horizontal alignment (start, center, space-between) */
    align-items: center;              /* Vertical alignment (stretch, center, flex-start) */
    flex-direction: row;              /* Direction (row, column) */
    flex-wrap: wrap;                  /* Wrap items to next line */
}

.item {
    flex: 1;                          /* Flex-grow (flex-shrink, flex-basis) */
    align-self: flex-start;           /* Align single item (flex-start, center) */
}

.container {
    display: grid;                    /* Set grid container */
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    grid-template-rows: auto;         /* Set row heights */
    gap: 10px;                        /* Space between grid items */
    grid-column: 1 / 3;               /* Span item across columns */
    grid-row: 1 / 2;                  /* Span item across rows */
}

.item {
    grid-area: header;                /* Name grid areas */
}

element {
    position: relative;               /* (relative, absolute, fixed, sticky) */
    top: 10px;                        /* Offset from top */
    left: 20px;                       /* Offset from left */
    z-index: 10;                      /* Layering of elements */
}

element {
    transition: all 0.3s ease-in-out; /* Transition effects */
}

@keyframes example {
    from { opacity: 0; }
    to { opacity: 1; }
}

element {
    animation: example 2s infinite;    /* Apply animation */
}

@media (max-width: 768px) {
    element {
        font-size: 14px;
    }
}

element {
    opacity: 0.5;                     /* Set transparency */
    visibility: hidden;               /* Hide element but keep space */
    display: none;                    /* Completely hide element */
    overflow: hidden;                 /* Handle overflow content */
    cursor: pointer;                  /* Mouse cursor styles */
    border-radius: 10px;              /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Element shadow */
}

element:first-child         /* Selects the first child */
element:last-child          /* Selects the last child */
element:nth-child(2)        /* Selects the 2nd child */
element:hover               /* Selects on hover */
element::before             /* Insert content before element */
element::after              /* Insert content after element */
element[attribute="value"]  /* Attribute selector */
element:not(selector)       /* Excludes elements matching selector */

element::before {
    content: '';                     /* Inserts content before an element */
    display: block;                  /* Ensures it behaves like a block */
}

element::after {
    content: '';                     /* Inserts content after an element */
    display: block;                  /* Ensures it behaves like a block */
}

element {
    transform: rotate(45deg);        /* Rotates the element */
    transform: scale(1.5);           /* Scales the element */
    transform: translateX(50px);     /* Moves element horizontally */
    transform: skew(20deg);          /* Skews the element */
}

:root {
    --primary-color: #3498db;        /* Define a custom variable */
    --font-size: 16px;
}

element {
    color: var(--primary-color);     /* Use the custom variable */
    font-size: var(--font-size);
}

element {
    clip-path: circle(50%);          /* Creates a circular clipping area */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Creates a polygonal clipping area */
}

element {
    mask-image: url('mask.png');     /* Masking with an image */
}

.container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";      /* Define named grid areas */
    grid-template-columns: 1fr 2fr;  /* Two columns, 1:2 ratio */
}

.header {
    grid-area: header;               /* Assign grid area to element */
}
.sidebar {
    grid-area: sidebar;
}
.main {
    grid-area: main;
}
.footer {
    grid-area: footer;
}

element {
    background: linear-gradient(to right, #3498db, #9b59b6); /* Gradient background */
    background: radial-gradient(circle, #ff7675, #d63031);   /* Radial gradient */
}

element {
    filter: blur(5px);               /* Apply a blur effect */
    filter: brightness(1.2);         /* Increase brightness */
    filter: grayscale(50%);          /* Apply grayscale effect */
}

.container {
    display: flex;
    justify-content: space-between;   /* Space between items */
    align-items: flex-start;          /* Align items to start */
    flex-direction: column-reverse;   /* Reverse column direction */
    flex-grow: 1;                     /* Element grows to fill space */
}

element {
    width: 100vw;                    /* Full viewport width */
    height: 100vh;                   /* Full viewport height */
    font-size: 2vw;                  /* Font size based on viewport width */
}

@media (orientation: landscape) {    /* Apply rules for landscape mode */
    element {
        background-color: #333;
    }
}

.container {
    scroll-snap-type: x mandatory;   /* Snaps items horizontally */
    overflow-x: scroll;              /* Enable horizontal scrolling */
}

.item {
    scroll-snap-align: start;        /* Snap items to start of container */
}

element {
    transition: background-color 0.5s ease-in-out;  /* Smooth transitions */
}

element:hover {
    background-color: #f39c12;       /* Transition effect on hover */
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

element {
    animation: fadeIn 2s ease-in-out infinite; /* Repeated animation */
}

element {
    position: relative;              /* Positioning must be set */
    z-index: 10;                     /* Higher z-index means in front */
}

@media (min-width: 768px) {
    element {
        display: block;              /* Layout for tablets and up */
    }
}

@media (min-width: 1024px) {
    element {
        display: flex;               /* Layout for larger screens */
    }
}

.container {
    display: grid;                   /* Main container is a grid */
    grid-template-columns: 1fr 1fr;
}

.item {
    display: flex;                   /* Each item uses flexbox */
    justify-content: center;         /* Align contents within items */
    align-items: center;
}

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* Explicitly define 3 columns */
    grid-auto-rows: minmax(100px, auto);    /* Implicit rows generated as needed */
}

@custom-media --small-viewport (max-width: 600px);

@media (--small-viewport) {
    element {
        font-size: 14px;
    }
}

img {
    object-fit: cover;           /* Crop to fit container while preserving aspect ratio */
    object-position: center;     /* Center the image within its container */
}

html {
    scroll-behavior: smooth;     /* Enables smooth scrolling for anchor links */
}

element {
    background-blend-mode: multiply;   /* Blend background color/image with a multiplier effect */
    mix-blend-mode: screen;            /* Blend the element with the background */
}

element {
    shape-outside: circle(50%);   /* Flow text around a circular shape */
    float: left;                  /* Allows text to wrap around */
    width: 200px;
    height: 200px;
}

body {
    counter-reset: section;          /* Reset counter at the start */
}

h2::before {
    counter-increment: section;      /* Increment section number */
    content: "Section " counter(section) ": "; /* Insert counter value */
}

element {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Create custom shapes with clipping */
}

element {
    height: 100vh;        /* Element is 100% of the viewport height */
    width: 100vw;         /* Element is 100% of the viewport width */
}

element {
    isolation: isolate;   /* Isolates the element’s z-index from its siblings */
}

element {
    filter: grayscale(100%);  /* Makes the element grayscale */
    filter: blur(5px);        /* Blurs the element */
    filter: contrast(200%);   /* Adjusts contrast */
}

element {
    aspect-ratio: 16 / 9;     /* Ensure the element maintains a 16:9 aspect ratio */
}

:root {
    --main-color: #3498db;
}

element {
    background-color: var(--main-color);
}

/* In JavaScript */
document.documentElement.style.setProperty('--main-color', '#e74c3c');

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Fill the space with items */
}

element {
    font-size: clamp(1rem, 2vw + 1rem, 2.5rem);  /* Dynamically adjusts font size based on viewport width */
}

element {
    margin-inline-start: 20px;  /* Replaces 'margin-left' but adjusts for RTL layouts */
    padding-block-end: 10px;    /* Replaces 'padding-bottom' */
}

.grid-item {
    grid-row: span 2;          /* Make grid item span multiple rows */
    grid-column: span 1;
}

element {
    backface-visibility: hidden; /* Hide element when it's rotated away from the viewer */
    transform: rotateY(180deg);   /* Rotate the element */
}

.container {
    scroll-snap-type: x mandatory; /* Enables scroll snapping */
    scroll-padding: 10px;          /* Adds padding to snapping */
}

element:has(> img) {
    border: 2px solid red;         /* Styles parent if it contains an image */
}

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
}

[data-theme="dark"] {
    --bg-color: #333333;
    --text-color: #ffffff;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: #fff;
    }
}

/* WebKit browsers */
::-webkit-scrollbar {
    width: 12px;                /* Width of the scrollbar */
}
::-webkit-scrollbar-track {
    background-color: #f1f1f1;  /* Track background */
}
::-webkit-scrollbar-thumb {
    background-color: #888;     /* Handle color */
    border-radius: 6px;         /* Handle rounded corners */
}
::-webkit-scrollbar-thumb:hover {
    background-color: #555;     /* Handle hover state */
}

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;   /* First column takes 1 part, second takes 2 parts */
}

.container {
    scroll-snap-type: y mandatory;     /* Snap items vertically */
    overflow-y: scroll;                /* Enable scrolling */
}
.item {
    scroll-snap-align: start;          /* Snap each item to the top */
}

img {
    object-fit: cover;     /* Ensures the image covers the container */
    object-position: center;  /* Center the image */
}

@layer base {
    h1 {
        color: blue;       /* Base layer */
    }
}

@layer theme {
    h1 {
        color: red;        /* Theme layer overrides base */
    }
}

@media print {
    body {
        color: black;
        background: white;
    }

    .no-print {
        display: none;      /* Hide elements when printing */
    }
}

element {
    content-visibility: auto;  /* Renders only when element is visible */
}

@supports (display: grid) {
    .container {
        display: grid;       /* Use grid layout if supported */
    }
}

@supports not (display: grid) {
    .container {
        display: block;      /* Fallback for older browsers */
    }
}

element {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.container {
    perspective: 1000px;   /* Controls the level of 3D perspective */
}
.element {
    transform: rotateY(45deg);   /* Rotate element in 3D */
}

element {
    background: conic-gradient(red, yellow, green);
}

.element {
    column-count: 3;           /* Split content into 3 columns */
    column-gap: 20px;          /* Gap between columns */
}

.element {
    font-size: clamp(1rem, 2vw + 1rem, 2.5rem); /* Flexible font-size */
}

.container {
    display: grid;
    grid-template-columns: auto 1fr 1fr;   /* First column adjusts to content */
}

.element {
    overscroll-behavior: contain;  /* Prevents scrolling past the boundaries */
}

element {
    aspect-ratio: 16 / 9;    /* Maintain a 16:9 aspect ratio */
}

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.child {
    display: subgrid;
    grid-column: span 2;    /* Span two columns in the subgrid */
}

CSS.registerProperty({
    name: '--custom-property',
    syntax: '',
    inherits: false,
    initialValue: '0px',
});

:root {
    --translate: 0px;
}

.element {
    transform: translateX(var(--translate));
    transition: transform 0.5s ease;
}

.element:hover {
    --translate: 50px;     /* Animates variable value */
}

.element {
    pointer-events: none;   /* Disables user interaction */
}

.parallax {
    transform: translateZ(-2px) scale(1.5);  /* Moves background slower than foreground */
}

@layer base {
    h1 {
        color: blue;
    }
}

@layer utilities {
    h1 {
        color: red;    /* Red overrides blue from base */
    }
}

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-thumb {
    background: #888;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

header {
    position: sticky;
    top: 0;         /* Sticks to the top of the viewport */
    background: white;
    z-index: 10;    /* Ensure it stays above other content */
}

.container {
    display: grid;
    grid-auto-flow: dense;  /* Fills gaps in the grid */
}

img {
    filter: grayscale(100%);  /* Makes the image grayscale */
}

.overlay {
    background: rgba(255, 0, 0, 0.5);
    mix-blend-mode: multiply;  /* Blends the overlay with the background */
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/mycustomfont.woff2') format('woff2');
}
body {
    font-family: 'MyCustomFont', sans-serif;
}

.container {
    display: grid;
    gap: 20px;  /* Sets a 20px gap between grid items */
}

input[type="text"],
input[type="email"] {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
}

document.documentElement.style.setProperty('--main-color', 'blue');

.shape {
    clip-path: circle(50%);
}

CSS.paintWorklet.addModule('myPaintWorklet.js');

.column {
    column-count: 3;        /* Number of columns */
    column-gap: 20px;       /* Gap between columns */
}

@supports (display: grid) {
    .container {
        display: grid;
    }
}

@media print {
    body {
        background: white;
        color: black;
    }
}

.navbar {
    display: flex;
    flex-direction: column;
    background-color: #333;
}

.navbar a {
    padding: 14px 20px;
    text-decoration: none;
    color: white;
}

.center {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    height: 100vh;          /* Full viewport height */
}

svg {
    width: 100px;
    height: 100px;
    fill: red;  /* Change SVG fill color */
}

h1::before {
    content: "Welcome! ";
}

.text {
    white-space: nowrap; /* Prevents text wrapping */
    overflow: hidden;    /* Hides overflow */
    text-overflow: ellipsis; /* Shows ellipsis for overflow text */
}

.sticky {
    position: sticky;
    top: 0;  /* Sticks to the top */
}

*   Group related styles together (e.g., layout, typography, components).
*   Use comments to separate sections.

*   Use BEM naming conventions for better organization.

        .block__element--modifier {
          /* styles */
        }

*   Start with a CSS reset or normalize stylesheet to minimize cross-browser inconsistencies.

*   Always test styles in different browsers and devices to ensure consistency.

*   Use minification tools to reduce file size and improve loading times.

*   Limit CSS specificity by avoiding deep selectors to improve performance and maintainability.

*   Use tools like PurgeCSS to remove unused styles from your production build.

*   Reuse styles through classes instead of duplicating CSS rules.

*   Consider using CSS preprocessors (like SASS or LESS) for features like variables, nesting, and mixins.