CSS 3 represents the modern foundation of web styling, enabling developers to create responsive, animated, and beautifully designed interfaces without relying on heavy frameworks. While CSS frameworks like Tailwind and Bootstrap have their place, understanding core CSS properties and layout systems remains essential for every web developer. This cheat sheet provides a comprehensive reference to CSS 3 properties, selectors, layout techniques, and modern features that power contemporary web development.
Whether you are building a Next.js application, styling a React component, or creating a custom design system, having quick access to CSS fundamentals accelerates development and improves code quality. This guide covers all essential aspects with practical code examples and best practices that apply directly to modern frontend development workflows.
CSS Selectors: Targeting Elements with Precision
CSS selectors form the foundation of every stylesheet, determining which elements receive which styles. Mastery of selectors enables precise styling without resorting to inline styles or excessive HTML classes. The selector ecosystem has expanded significantly in CSS 3, offering developers powerful ways to target elements based on attributes, pseudo-states, and structural relationships.
1/* Element selector */2p { color: #333; line-height: 1.6; }3 4/* Class selector */5.card { background: white; border-radius: 8px; }6 7/* ID selector */8#header { position: fixed; top: 0; width: 100%; }9 10/* Universal selector */11* { box-sizing: border-box; margin: 0; padding: 0; }12 13/* Attribute selector */14input[type="email"] { border: 1px solid #ccc; }15 16/* Multiple selectors */17h1, h2, h3 { font-family: system-ui, sans-serif; }Attribute Selectors
Attribute selectors in CSS 3 provide powerful pattern-matching capabilities for selecting elements based on their attribute values. These selectors support exact matching, substring matching, prefix and suffix matching, and whitespace-separated value matching.
1/* Exact match */2a[href="https://example.com"] { color: blue; }3 4/* Contains substring */5img[src*="thumbnail"] { width: 150px; }6 7/* Starts with */8a[href^="/docs"] { font-weight: 500; }9 10/* Ends with */11a[href$=".pdf"] { padding-right: 20px; }12 13/* Contains word in space-separated list */14div[class~="featured"] { border: 2px solid gold; }1/* Interaction states */2button:hover { background: #4a90d9; }3button:focus-visible { outline: 2px solid #2563eb; }4button:active { transform: scale(0.98); }5 6/* Form validation */7input:invalid { border-color: #dc2626; }8input:valid { border-color: #16a34a; }9 10/* Structural selectors */11li:first-child { font-weight: bold; }12li:nth-child(2n) { background: #f5f5f5; }13 14/* Pseudo-elements */15.card::before { content: ""; position: absolute; top: 0; left: 0; }16p::first-line { font-weight: 600; }17::selection { background: #bfdbfe; }The Box Model: Foundation of CSS Layout
Every element in CSS follows the box model, which determines how element dimensions and spacing are calculated. Understanding the box model is fundamental to all CSS layout work, yet it remains a source of confusion for many developers, particularly the difference between content-box and border-box sizing.
1/* Universal box-sizing reset */2*, *::before, *::after { box-sizing: border-box; }3 4/* Box model properties */5.element {6 /* Content dimensions */7 width: 300px;8 height: 200px;9 10 /* Padding */11 padding: 20px;12 padding: 10px 20px;13 padding: 10px 20px 15px;14 padding: 5px 10px 15px 20px;15 16 /* Border */17 border: 1px solid #e5e7eb;18 border-radius: 8px;19 20 /* Margin */21 margin: 20px;22 margin: 10px auto;23 margin-top: 1rem;24}Flexbox: The One-Dimensional Layout System
Flexbox provides a powerful one-dimensional layout system for distributing space and aligning items in a container. Whether you need to center content, create navigation menus, or build complex card layouts, flexbox offers intuitive solutions that work across all modern browsers.
1/* Flex container */2.flex-container {3 display: flex;4 flex-direction: row | row-reverse | column | column-reverse;5 flex-wrap: nowrap | wrap | wrap-reverse;6 7 /* Main axis alignment */8 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;9 10 /* Cross axis alignment */11 align-items: stretch | flex-start | flex-end | center | baseline;12 13 /* Multi-line alignment */14 align-content: flex-start | flex-end | center | space-between | space-around | stretch;15 16 /* Gap between items */17 gap: 20px;18}1/* Flex item sizing */2.flex-item {3 /* Grow | Shrink | Basis */4 flex: 0 1 auto; /* Default */5 flex: 1 1 0%; /* Grow equally */6 flex: auto; /* Use computed size */7 flex: none; /* No flexibility */8 9 /* Individual alignment */10 align-self: auto | flex-start | flex-end | center | baseline | stretch;11 12 /* Visual order */13 order: 1;14}CSS Grid: The Two-Dimensional Layout System
CSS Grid provides a comprehensive two-dimensional layout system for creating complex page layouts with rows and columns. Unlike flexbox's single-axis approach, Grid handles both dimensions simultaneously, making it ideal for overall page structure, dashboard layouts, and gallery grids.
1/* Grid container */2.grid-container {3 display: grid;4 5 /* Define columns and rows */6 grid-template-columns: repeat(3, 1fr);7 grid-template-rows: 100px auto 1fr;8 9 /* Gap between cells */10 gap: 20px;11 12 /* Named grid areas */13 grid-template-areas:14 "header header header"15 "sidebar main main"16 "footer footer footer";17}18 19/* Named areas usage */20.header { grid-area: header; }21.sidebar { grid-area: sidebar; }22.main { grid-area: main; }23.footer { grid-area: footer; }1/* Responsive grid pattern */2.responsive-grid {3 display: grid;4 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));5 gap: 20px;6}Modern CSS Features
CSS continues to evolve with features that reduce JavaScript dependencies and enable more sophisticated styling approaches. CSS Custom Properties provide native theming and dynamic styling, while container queries enable component-level responsive design independent of viewport size.
1/* Define custom properties */2:root {3 --color-primary: #3b82f6;4 --color-secondary: #8b5cf6;5 --font-sans: system-ui, sans-serif;6 --spacing-md: 1rem;7 --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);8}9 10/* Use custom properties */11.btn {12 background: var(--color-primary);13 padding: var(--spacing-sm) var(--spacing-lg);14 box-shadow: var(--shadow-md);15}16 17/* Dark mode */18@media (prefers-color-scheme: dark) {19 :root {20 --color-primary: #60a5fa;21 --bg-primary: #1e293b;22 }23}1/* Define a container */2.card-container {3 container-type: inline-size;4 container-name: card;5}6 7/* Container query styles */8@container card (min-width: 400px) {9 .card {10 display: grid;11 grid-template-columns: 150px 1fr;12 gap: 1rem;13 }14}15 16@container card (max-width: 399px) {17 .card-title {18 font-size: 1rem;19 }20}Animations and Transitions
CSS animations and transitions enable smooth visual effects without JavaScript, improving user experience through feedback and visual interest. Transitions provide smooth interpolation between property values, while keyframe animations offer multi-step control for complex effects.
1/* Transition basics */2.transition-element {3 transition: all 0.3s ease;4 transition: background-color 0.2s ease-in-out, transform 0.2s ease;5 transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);6}7 8/* Interactive examples */9.btn {10 transition: transform 0.2s, background-color 0.2s;11}12 13.btn:hover {14 transform: translateY(-2px);15 background-color: #2563eb;16}1@keyframes fadeIn {2 from { opacity: 0; }3 to { opacity: 1; }4}5 6@keyframes slideUp {7 from {8 opacity: 0;9 transform: translateY(20px);10 }11 to {12 opacity: 1;13 transform: translateY(0);14 }15}16 17@keyframes pulse {18 0%, 100% { transform: scale(1); }19 50% { transform: scale(1.05); }20}21 22/* Apply animations */23.animated-element {24 animation: fadeIn 0.5s ease-out;25 animation: pulse 2s ease-in-out infinite;26}Responsive Design Techniques
Responsive design ensures websites adapt gracefully to different screen sizes. Modern responsive CSS leverages media queries, flexible units, and container queries to create adaptive layouts without JavaScript. The mobile-first approach using min-width breakpoints remains the recommended pattern for building responsive interfaces.
1/* Mobile-first base styles */2.page {3 width: 100%;4 padding: 1rem;5}6 7/* Tablet breakpoint */8@media (min-width: 640px) {9 .page {10 padding: 1.5rem;11 max-width: 640px;12 }13}14 15/* Desktop breakpoint */16@media (min-width: 1024px) {17 .page {18 padding: 2rem;19 max-width: 1024px;20 }21}22 23/* User preference queries */24@media (prefers-color-scheme: dark) {25 .page {26 background: #0f172a;27 color: #f8fafc;28 }29}1/* Fluid typography */2.heading-1 {3 font-size: clamp(2rem, 5vw, 4rem);4}5 6.heading-2 {7 font-size: clamp(1.5rem, 4vw, 3rem);8}9 10.body-text {11 font-size: clamp(1rem, 2vw, 1.25rem);12 line-height: clamp(1.5, 3vw, 1.75);13}14 15/* Flexible spacing */16.section {17 padding: clamp(1rem, 5vw, 4rem);18}CSS Performance Best Practices
Writing performant CSS impacts page load times, rendering performance, and user experience. Understanding browser rendering pipelines and selector efficiency helps create fast, responsive websites. Focus on using efficient selectors like class selectors, and animate only composite properties like transform and opacity for smooth 60fps animations. For teams looking to optimize their web applications, following these CSS performance guidelines ensures optimal rendering performance across devices.
1/* Efficient selectors */2.card { } /* Fast - class selector */3.nav-item { } /* Fast - class selector */4 5/* Avoid deep descendant selectors */6/* div.container ul li a.link { } SLOW */7 8/* Efficient animations */9.smooth-animation {10 /* Triggers composite only (fast) */11 transform: translateX(100px);12 opacity: 0.5;13}14 15/* Layout containment */16.isolated-component {17 contain: layout paint;18}19 20/* Content visibility for lazy rendering */21.lazy-section {22 content-visibility: auto;23 contain-intrinsic-size: 0 500px;24}Frequently Asked Questions
Sources
- Freemote CSS Cheat Sheet - Comprehensive CSS cheat sheet covering layouts, animations, responsive design, and modern CSS features
- Hostinger CSS Cheat Sheet - CSS reference with downloadable cheat sheet formats
- GitHub CSS Cheat Sheet - Community-maintained CSS reference