CSS3 provides the visual layer of the web. Flexbox handles 1D layout (rows or columns). Grid handles 2D layout (rows AND columns). Custom properties (CSS variables) enable theming. Media queries enable responsive design.
| Element / Property | Syntax / Values | Description |
|---|---|---|
| Selector basics | element / .class / #id / * / [attr] | Element, class, ID, universal, attribute selectors |
| Combinators | A B / A > B / A + B / A ~ B | Descendant / child / adjacent / sibling |
| Pseudo-classes | :hover :focus :active :nth-child(n) :not(x) | State and structural pseudo-classes |
| Pseudo-elements | ::before ::after ::placeholder ::selection | Generated content and special parts |
| Custom properties | --primary: #3b82f6; color: var(--primary) | CSS variables — inherit and cascade |
| box-sizing | box-sizing: border-box | Include padding+border in width calculation (set globally) |
| display | block / inline / inline-block / flex / grid / none | Element layout type |
| position | static / relative / absolute / fixed / sticky | Positioning scheme |
| z-index | z-index: 10 | Stacking order (higher = in front) |
| Flexbox container | display:flex; flex-direction:row|column; flex-wrap:wrap | Enable flex layout |
| justify-content | flex-start/center/flex-end/space-between/space-around | Main-axis alignment |
| align-items | flex-start/center/flex-end/stretch/baseline | Cross-axis alignment |
| gap | gap: 16px / row-gap: 8px / column-gap: 16px | Space between flex/grid items |
| flex | flex: 1 / flex: 0 0 200px | Flex grow, shrink, basis shorthand |
| Grid container | display:grid; grid-template-columns:repeat(3,1fr) | Enable grid layout |
| grid-template-columns | repeat(auto-fit, minmax(200px,1fr)) | Responsive column tracks |
| grid-column/row | grid-column: 1 / 3; grid-row: span 2 | Item placement and spanning |
| grid-area | grid-area: header | Named grid area placement |
| margin: auto | margin: 0 auto | Center block horizontally |
| padding | padding: top right bottom left (shorthand) | Inner spacing |
| border | border: 1px solid #334155 | Border shorthand |
| border-radius | border-radius: 8px / 50% | Rounded corners / circle |
| box-shadow | box-shadow: 0 4px 6px rgba(0,0,0,.1) | Drop shadow |
| background | background: linear-gradient(135deg,#1e293b,#0f172a) | Background color, image, gradient |
| color | color: #e5e7eb / hsl(210,40%,96%) | Text color |
| font-family | font-family: 'Inter', system-ui, sans-serif | Font stack |
| font-size | font-size: 1rem / 16px / clamp(1rem,2.5vw,1.5rem) | Text size — prefer rem |
| line-height | line-height: 1.6 | Vertical space between lines |
| text-transform | uppercase / lowercase / capitalize | Case transformation |
| opacity | opacity: 0.7 | Transparency (0=invisible, 1=opaque) |
| transform | transform: rotate(45deg) scale(1.2) translateX(20px) | 2D/3D transformations |
| transition | transition: all 0.3s ease | Animate property changes |
| animation | @keyframes + animation: name 1s ease infinite | Keyframe animations |
| @media | @media (max-width: 768px) { ... } | Responsive breakpoints |
| clamp() | font-size: clamp(1rem, 2.5vw, 2rem) | Fluid value between min and max |
| min()/max() | width: min(100%, 600px) | CSS math functions |
| :root | `:root { --color: #3b82f6; }` | Global custom property scope |
| overflow | overflow: hidden / scroll / auto | Content overflow handling |
| object-fit | object-fit: cover / contain | How img/video fills its box |
Save as .html or .css and open in any browser.
/* CSS3 Complete Example — style.css */
/* ── 1. CSS Custom Properties (variables) ──────────────────── */
:root {
--bg: #0f172a;
--surface: #1e293b;
--border: #334155;
--text: #e5e7eb;
--muted: #9ca3af;
--accent: #22d3ee;
--accent-dk:#0891b2;
--radius: 8px;
--shadow: 0 4px 6px -1px rgba(0,0,0,.4);
}
/* ── 2. Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; font-size: 1rem;
line-height: 1.6; background: var(--bg); color: var(--text); }
/* ── 3. Layout — CSS Grid ───────────────────────────────────── */
.site-layout {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
header { grid-area: header; background: var(--surface); padding: 16px 24px;
border-bottom: 1px solid var(--border); }
nav { grid-area: nav; background: var(--surface); padding: 16px; }
main { grid-area: main; padding: 24px; }
footer { grid-area: footer; background: var(--surface); padding: 12px 24px;
border-top: 1px solid var(--border); text-align: center; }
/* ── 4. Card Grid — Flexbox ─────────────────────────────────── */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
flex: 1 1 280px;
box-shadow: var(--shadow);
transition: transform 0.2s, border-color 0.2s;
}
.card:hover {
transform: translateY(-2px);
border-color: var(--accent);
}
/* ── 5. Buttons ─────────────────────────────────────────────── */
.btn {
display: inline-block;
padding: 10px 24px;
background: linear-gradient(135deg, var(--accent-dk), #0e6f87);
color: #fff;
border: none;
border-radius: var(--radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: opacity 0.2s, transform 0.1s;
}
.btn:hover { opacity: 0.9; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* ── 6. Form Styles ─────────────────────────────────────────── */
input, select, textarea {
width: 100%;
padding: 10px 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
font-size: 1rem;
transition: border-color 0.2s;
margin-bottom: 12px;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--accent);
}
/* ── 7. Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
.site-layout {
grid-template-areas: "header" "main" "footer";
grid-template-columns: 1fr;
}
nav { display: none; }
.card-grid { flex-direction: column; }
}
/* ── 8. Animation ───────────────────────────────────────────── */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.4s ease forwards; }
/* ── 9. Utility classes ─────────────────────────────────────── */
.text-accent { color: var(--accent); }
.text-muted { color: var(--muted); }
.mt-4 { margin-top: 1rem; }
.p-4 { padding: 1rem; }
.flex { display: flex; }
.center{ align-items: center; justify-content: center; }