CSS
CHEAT SHEET.

Selectors

Combinators

div p           /* descendant (any level) */
div > p         /* child (direct) */
h1 + p          /* adjacent sibling */
h1 ~ p          /* general sibling */

Pseudo-classes

:hover          /* mouse over */
:focus          /* focused element */
:active         /* being clicked */
:visited        /* visited link */
:first-child    /* first child of parent */
:last-child     /* last child of parent */
:nth-child(n)   /* nth child (1‑based) */
:nth-child(odd) /* odd children */
:nth-child(even)/* even children */
:not(selector)  /* negation */
:empty          /* no children */
:checked        /* checked checkbox/radio */
:disabled       /* disabled input */

Pseudo-elements

::before        /* insert before content */
::after         /* insert after content */
::first-line    /* first line of text */
::first-letter  /* first letter */
::selection     /* selected text */
::placeholder   /* input placeholder */

Box Model

/* Content box (default) */
box-sizing: content-box;  /* width = content only */

/* Border box (recommended) */
box-sizing: border-box;   /* width = content + padding + border */

/* Shorthand */
margin: 10px;             /* all sides */
margin: 10px 20px;        /* vertical horizontal */
margin: 10px 20px 15px;   /* top horizontal bottom */
margin: 10px 20px 15px 5px; /* top right bottom left */

/* Individual sides */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 5px;

/* Same for padding, border */
padding: 10px;
border: 1px solid #000;

/* Border shorthand: width style color */
border: 2px solid red;
border-radius: 8px;       /* rounded corners */

Display

display: block;        /* full width, new line */
display: inline;       /* inline, no width/height */
display: inline-block; /* inline but can set dimensions */
display: flex;         /* flex container */
display: grid;         /* grid container */
display: none;         /* hidden (removes space) */
visibility: hidden;    /* hidden (keeps space) */

Positioning

position: static;   /* default, in flow */
position: relative; /* offset from normal position */
position: absolute; /* relative to nearest positioned ancestor */
position: fixed;    /* relative to viewport */
position: sticky;   /* mixes relative + fixed */

/* Offset properties (works with relative/absolute/fixed/sticky) */
top: 10px;
left: 20px;
bottom: 10px;
right: 20px;

/* Stacking context */
z-index: 10;        /* higher number = above */

Flexbox

Container Properties

/* Container */
display: flex;
flex-direction: row;       /* row, row-reverse, column, column-reverse */
flex-wrap: nowrap;         /* nowrap, wrap, wrap-reverse */
justify-content: flex-start; /* main‑axis alignment */
align-items: stretch;      /* cross‑axis alignment */
align-content: stretch;    /* multi‑line alignment */
gap: 10px;                 /* spacing between items */

/* justify‑content values */
flex-start, flex-end, center, space-between, space-around, space-evenly

/* align‑items values */
flex-start, flex-end, center, stretch, baseline

Item Properties

flex-grow: 0;         /* ability to grow */
flex-shrink: 1;       /* ability to shrink */
flex-basis: auto;     /* initial size */

/* Shorthand */
flex: 0 1 auto;       /* grow shrink basis */
flex: 1;              /* flex: 1 1 0 */

align-self: auto;     /* overrides align‑items for this item */
order: 0;             /* visual order (can be negative) */

Flex Example

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    height: 200px;
}

.item {
    flex: 1;
    padding: 20px;
    background: #f0f0f0;
}

CSS Grid

Container Properties

display: grid;
grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */
grid-template-columns: 100px auto 2fr; /* fixed, auto, fraction */
grid-template-rows: 100px 200px;     /* 2 rows */
gap: 20px;              /* spacing between items */
justify-items: stretch; /* horizontal alignment in cell */
align-items: stretch;   /* vertical alignment in cell */

/* Repeat and auto */
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Item Properties

/* Span columns/rows */
grid-column: 1 / 3;      /* starts at col 1, ends at col 3 */
grid-column: span 2;     /* spans 2 columns */
grid-row: 1 / 3;         /* spans 2 rows */

/* Shorthand */
grid-area: 1 / 1 / 3 / 3; /* row-start col-start row-end col-end */
justify-self: stretch;   /* horizontal alignment for item */
align-self: stretch;     /* vertical alignment for item */

Grid Example

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

.header {
    grid-column: 1 / -1;   /* spans all columns */
}

.sidebar {
    grid-column: 1 / 2;
}

.main {
    grid-column: 2 / 4;
}

Typography

/* Font family */
font-family: Arial, sans-serif;
font-family: 'Space Grotesk', sans-serif;

/* Font size */
font-size: 16px;
font-size: 1.2rem;        /* relative to root */
font-size: 1.2em;         /* relative to parent */
font-size: 120%;          /* percentage of parent */

/* Font weight */
font-weight: normal;      /* 400 */
font-weight: bold;        /* 700 */
font-weight: 300;         /* light */
font-weight: 600;         /* semi‑bold */

/* Font style */
font-style: normal;
font-style: italic;

/* Line height */
line-height: 1.5;         /* multiplier of font‑size */
line-height: 24px;

/* Text alignment */
text-align: left;
text-align: center;
text-align: right;
text-align: justify;

/* Text decoration */
text-decoration: none;
text-decoration: underline;
text-decoration: line-through;

/* Text transform */
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

/* Letter spacing */
letter-spacing: 2px;
word-spacing: 4px;

/* Text shadow */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

Colors & Backgrounds

/* Color values */
color: #ff0000;           /* hex */
color: #f00;              /* shorthand hex */
color: rgb(255, 0, 0);    /* RGB */
color: rgba(255, 0, 0, 0.5); /* RGB with alpha */
color: hsl(0, 100%, 50%); /* HSL */
color: hsla(0, 100%, 50%, 0.5); /* HSL with alpha */
color: red;               /* named color */

/* Background color */
background-color: #f0f0f0;

/* Background image */
background-image: url('image.jpg');
background-size: cover;   /* cover, contain, auto */
background-position: center;
background-repeat: no-repeat;

/* Shorthand */
background: #f0f0f0 url('image.jpg') center/cover no-repeat;

Transitions

/* Transition shorthand */
transition: property duration timing-function delay;

/* Examples */
transition: background-color 0.3s ease;
transition: all 0.5s ease-in-out;
transition: transform 0.2s ease, opacity 0.3s ease;

/* Timing functions */
ease, linear, ease-in, ease-out, ease-in-out
cubic-bezier(0.25, 0.1, 0.25, 1)  /* custom */

/* Use with :hover, :focus, etc. */
.box {
    background: blue;
    transition: background 0.3s ease;
}
.box:hover {
    background: red;
}

Animations

/* Define keyframes */
@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Apply animation */
.animated {
    animation-name: slide;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;   /* normal, reverse, alternate */
    animation-fill-mode: forwards; /* keeps final state */
    animation-play-state: running;
}

/* Shorthand */
animation: slide 2s ease-in-out infinite;

Transforms

/* 2D Transforms */
transform: translateX(50px);   /* move horizontally */
transform: translateY(20px);   /* move vertically */
transform: translate(50px, 20px); /* both */
transform: rotate(45deg);      /* rotate (deg, rad, turn) */
transform: scale(1.5);         /* scale (1 = original) */
transform: scaleX(2);          /* scale horizontally */
transform: skew(10deg);        /* skew */

/* Multiple transforms */
transform: rotate(10deg) scale(1.2) translateX(20px);

/* 3D Transforms */
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: perspective(500px) rotateX(20deg);

/* Origin */
transform-origin: center;      /* default */
transform-origin: top left;
transform-origin: 20px 30px;

Responsive Design

Media Queries

/* Syntax */
@media media-type and (condition) {
    /* CSS rules */
}

/* Common breakpoints */
@media (max-width: 768px) {
    /* Mobile styles */
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet styles */
}

@media (min-width: 1025px) {
    /* Desktop styles */
}

/* Orientation */
@media (orientation: landscape) { ... }
@media (orientation: portrait) { ... }

/* Print styles */
@media print {
    .no-print { display: none; }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
    body { background: #111; color: #fff; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

Responsive Units

px        /* fixed pixels */
em        /* relative to parent font‑size */
rem       /* relative to root font‑size (usually 16px) */
%         /* percentage of parent */
vw        /* viewport width (1vw = 1% of viewport) */
vh        /* viewport height */
vmin      /* min(vw, vh) */
vmax      /* max(vw, vh) */
fr        /* fraction unit (grid) */

Common Properties Reference

Box Shadow

/* box-shadow: x-offset y-offset blur spread color */
box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
box-shadow: 0 4px 6px -2px rgba(0,0,0,0.1);

/* Inner shadow */
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);

/* Multiple shadows */
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05);

CSS Variables (Custom Properties)

/* Define variables */
:root {
    --primary-color: #2362c5;
    --spacing-unit: 16px;
    --border-radius: 8px;
}

/* Use variables */
.button {
    background: var(--primary-color);
    padding: var(--spacing-unit);
    border-radius: var(--border-radius);
}

Best Practices

• Use box-sizing: border-box globally to simplify sizing.
• Use rem for font sizes – respects user preferences.
• Use em for spacing within components (padding, margin).
• Use flexbox and grid instead of float for modern layouts.
• Organise CSS with comments – group related styles.
• Use CSS variables for theming and consistency.
• Prefer class selectors over ID selectors for styling.
• Use min-height and max-width for responsive layouts.
• Use @media queries for responsive design (mobile‑first or desktop‑first).
• Use will-change for animations that need performance optimisation.
• Use prefers-reduced-motion to respect user accessibility settings.