HTML & CSS Cheat Sheet

/* Element selector */
p { color: blue; }

/* Class selector */
.active { background: yellow; }

/* ID selector */
#header { font-size: 24px; }

/* Attribute selector */
input[type="text"] { border: 1px solid; }

/* Descendant selector */
div p { margin: 10px; }

/* Child selector */
ul > li { list-style: none; }

/* Adjacent sibling */
h1 + p { margin-top: 0; }

/* General sibling */
h1 ~ p { color: gray; }

/* Pseudo-classes */
a:hover { color: red; }
button:active { transform: scale(0.9); }
li:first-child { font-weight: bold; }
p:nth-child(2n) { background: #f0f0f0; }
input:focus { outline: 2px solid blue; }

/* Pseudo-elements */
p::before { content: "→ "; }
p::after { content: " ←"; }
p::first-line { text-transform: uppercase; }

/* Combinators */
.parent .child { margin: 5px; }  /* Descendant */
.parent > .child { margin: 5px; }  /* Direct child */

/* Container */
.flex-container {
    display: flex;

    /* Main axis (left-right by default) */
    justify-content: space-between;  /* flex-start, center, flex-end, space-around, space-evenly */

    /* Cross axis (top-bottom) */
    align-items: center;  /* flex-start, center, flex-end, stretch */

    /* Multiple rows/columns */
    flex-wrap: wrap;      /* nowrap, wrap, wrap-reverse */

    /* Row or column layout */
    flex-direction: row;  /* row, column, row-reverse, column-reverse */

    /* Gap between items */
    gap: 10px;
}

/* Items */
.flex-item {
    flex: 1;              /* Grow equally */
    flex-grow: 1;         /* How much to grow */
    flex-shrink: 1;       /* How much to shrink */
    flex-basis: 100px;    /* Base width/height */

    /* Or shorthand: flex: grow shrink basis */
    flex: 1 1 100px;
}

.flex-item:nth-child(1) {
    flex: 2;              /* Takes 2x space */
}

.flex-item:nth-child(2) {
    flex: 1;              /* Takes 1x space */
}

/* Container */
.grid-container {
    display: grid;

    /* Define columns */
    grid-template-columns: 200px 1fr 150px;
    grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    /* Define rows */
    grid-template-rows: 100px 1fr 50px;
    grid-template-rows: auto;

    /* Gaps */
    gap: 10px;
    column-gap: 15px;
    row-gap: 20px;

    /* Alignment */
    justify-items: center;    /* Horizontal */
    align-items: center;      /* Vertical */
    justify-content: space-between;
    align-content: space-between;
}

/* Items */
.grid-item {
    grid-column: 1 / 3;       /* Span columns 1-2 */
    grid-row: 1 / 3;          /* Span rows 1-2 */
    grid-column: span 2;      /* Span 2 columns */
}

/* Named grid areas */
.grid-container {
    grid-template-areas:
        "header header header"
        "sidebar content sidebar"
        "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet (768px and up) */
@media (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

/* Large screen (1200px and up) */
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

/* Landscape orientation */
@media (orientation: landscape) {
    body { font-size: 18px; }
}

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

/* Print styles */
@media print {
    .no-print { display: none; }
    body { font-size: 12pt; }
}

/* Responsive typography */
body {
    font-size: clamp(16px, 2.5vw, 24px);
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}