Modern CSS Guide
Complete CSS reference covering Flexbox, Grid, responsive design, animations, and modern CSS features. Essential for creating beautiful, responsive web layouts.
Modern CSS Power
Modern CSS provides powerful layout systems, custom properties, and advanced selectors. Learn these patterns to create maintainable, responsive designs.
Coverage: Flexbox, Grid, CSS Variables, Modern pseudo-selectors, Animations
Selectors
CSS Selectors
/* Basic selectors */
* { margin: 0; padding: 0; } /* Universal */
div { display: block; } /* Element */
.class-name { color: blue; } /* Class */
#unique-id { font-weight: bold; } /* ID */
/* Attribute selectors */
[type="text"] { border: 1px solid #ccc; }
[class*="btn"] { cursor: pointer; } /* Contains */
[href^="https"] { color: green; } /* Starts with */
[src$=".jpg"] { border-radius: 8px; } /* Ends with */
/* Combinators */
.parent .child { color: red; } /* Descendant */
.parent > .direct-child { margin: 10px; } /* Direct child */
.element + .adjacent { margin-top: 0; } /* Adjacent sibling */
.element ~ .general-sibling { opacity: 0.8; } /* General sibling */
/* Pseudo-classes */
.button:hover { background-color: #0056b3; }
.input:focus { outline: 2px solid blue; }
.item:nth-child(odd) { background-color: #f9f9f9; }
.item:nth-child(3n+1) { margin-left: 0; } /* Every 3rd starting from 1st */
.element:not(.excluded) { display: block; }
Flexbox Layout
Flex Container Properties
/* Container setup */
.flex-container {
display: flex; /* or inline-flex */
flex-direction: row; /* row | row-reverse | column | column-reverse */
flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
flex-flow: row nowrap; /* Shorthand for direction + wrap */
}
/* Alignment properties */
.flex-container {
justify-content: flex-start; /* Main axis alignment */
/* flex-start | flex-end | center | space-between | space-around | space-evenly */
align-items: stretch; /* Cross axis alignment */
/* stretch | flex-start | flex-end | center | baseline */
align-content: stretch; /* Multi-line cross axis alignment */
/* stretch | flex-start | flex-end | center | space-between | space-around */
gap: 16px; /* Space between items */
row-gap: 16px; /* Vertical gap */
column-gap: 24px; /* Horizontal gap */
}
/* Common flex patterns */
.center-everything {
display: flex;
justify-content: center;
align-items: center;
}
.space-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.sidebar-main {
display: flex;
gap: 20px;
}
.sidebar { flex: 0 0 250px; } /* Don't grow, don't shrink, 250px base */
.main { flex: 1; } /* Take remaining space */
Flex Item Properties
/* Individual flex item control */
.flex-item {
flex-grow: 0; /* How much to grow relative to other items */
flex-shrink: 1; /* How much to shrink relative to other items */
flex-basis: auto; /* Initial size before free space distribution */
flex: 0 1 auto; /* Shorthand: grow shrink basis */
flex: 1; /* Common: flex: 1 1 0% (equal distribution) */
flex: none; /* flex: 0 0 auto (fixed size) */
align-self: auto; /* Override container's align-items */
/* auto | flex-start | flex-end | center | baseline | stretch */
order: 0; /* Change visual order without changing HTML */
}
/* Practical examples */
.equal-width {
flex: 1; /* All items take equal space */
}
.fixed-width {
flex: 0 0 200px; /* Fixed 200px width */
}
.grow-only {
flex: 1 0 auto; /* Grow but don't shrink below content size */
}
.priority-item {
flex-grow: 2; /* Grows twice as fast as items with flex-grow: 1 */
}
CSS Grid
Grid Container Properties
/* Grid container setup */
.grid-container {
display: grid; /* or inline-grid */
/* Define columns */
grid-template-columns: 1fr 2fr 1fr; /* Fractional units */
grid-template-columns: 200px 1fr 100px; /* Mixed units */
grid-template-columns: repeat(3, 1fr); /* Repeat pattern */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive */
/* Define rows */
grid-template-rows: 100px auto 50px;
grid-template-rows: repeat(3, 1fr);
/* Named grid lines */
grid-template-columns: [sidebar-start] 250px [sidebar-end main-start] 1fr [main-end];
/* Gaps */
gap: 20px; /* Both row and column gap */
row-gap: 20px;
column-gap: 30px;
}
/* Grid areas template */
.layout-grid {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 150px;
grid-template-rows: 60px 1fr 40px;
min-height: 100vh;
}
Grid Item Properties
/* Grid item positioning */
.grid-item {
/* Column positioning */
grid-column-start: 1;
grid-column-end: 3;
grid-column: 1 / 3; /* Shorthand */
grid-column: 1 / span 2; /* Span 2 columns */
/* Row positioning */
grid-row-start: 2;
grid-row-end: 4;
grid-row: 2 / 4; /* Shorthand */
grid-row: 2 / span 2; /* Span 2 rows */
/* Combined shorthand */
grid-area: 2 / 1 / 4 / 3; /* row-start / col-start / row-end / col-end */
/* Using named areas */
grid-area: header; /* Place in "header" area */
/* Alignment within grid cell */
justify-self: center; /* Horizontal alignment */
align-self: center; /* Vertical alignment */
place-self: center; /* Both alignments */
}
/* Practical grid examples */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
.feature-item {
grid-column: span 2; /* Take 2 columns */
grid-row: span 2; /* Take 2 rows */
}
Responsive Design
Media Queries & Responsive Patterns
/* Common breakpoints */
/* Mobile first approach */
.container {
width: 100%;
padding: 16px;
}
/* Tablet */
@media (min-width: 768px) {
.container {
max-width: 750px;
margin: 0 auto;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
padding: 32px;
}
}
/* Large screens */
@media (min-width: 1440px) {
.container {
max-width: 1400px;
}
}
/* Advanced media queries */
@media (orientation: landscape) {
.hero { height: 80vh; }
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--text-color: #ffffff;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Responsive Grid & Flexbox
/* Responsive grid layout */
.responsive-grid {
display: grid;
grid-template-columns: 1fr; /* Mobile: single column */
gap: 16px;
}
@media (min-width: 768px) {
.responsive-grid {
grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */
}
}
@media (min-width: 1024px) {
.responsive-grid {
grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
}
}
/* Auto-responsive grid */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
/* Responsive flexbox navigation */
.nav {
display: flex;
flex-direction: column; /* Mobile: stack vertically */
gap: 8px;
}
@media (min-width: 768px) {
.nav {
flex-direction: row; /* Desktop: horizontal */
justify-content: space-between;
align-items: center;
}
}
/* Container queries (modern browsers) */
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 300px) {
.card {
display: flex;
flex-direction: row;
}
}
Positioning
Position Properties
/* Position types */
.static {
position: static; /* Default: normal document flow */
}
.relative {
position: relative; /* Relative to normal position */
top: 10px;
left: 20px;
}
.absolute {
position: absolute; /* Relative to nearest positioned ancestor */
top: 0;
right: 0;
}
.fixed {
position: fixed; /* Relative to viewport */
bottom: 20px;
right: 20px;
z-index: 1000;
}
.sticky {
position: sticky; /* Sticky within container */
top: 0; /* Stick when 0px from top of viewport */
background: white;
z-index: 100;
}
/* Common positioning patterns */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.centered-absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.corner-badge {
position: absolute;
top: -8px;
right: -8px;
background: red;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
}
Animations & Transitions
CSS Transitions
/* Basic transitions */
.button {
background-color: #007bff;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
/* Multiple transitions */
.card {
transform: scale(1);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
/* All properties transition */
.smooth-element {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Transition timing functions */
.ease-in { transition: transform 0.3s ease-in; }
.ease-out { transition: transform 0.3s ease-out; }
.ease-in-out { transition: transform 0.3s ease-in-out; }
.linear { transition: transform 0.3s linear; }
.custom-bezier { transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
CSS Animations
/* Keyframe animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
0% {
transform: translateY(30px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
/* Animation properties */
.animated-element {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-timing-function: ease-out;
animation-delay: 0.2s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
/* Shorthand */
animation: fadeIn 0.6s ease-out 0.2s forwards;
}
.spinning-loader {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Performance optimized animations */
.gpu-optimized {
will-change: transform; /* Hint browser for optimization */
transform: translateZ(0); /* Force hardware acceleration */
}
CSS Variables
Custom Properties
/* Global CSS variables */
:root {
/* Colors */
--primary-color: #007bff;
--secondary-color: #6c757d;
--success-color: #28a745;
--danger-color: #dc3545;
--warning-color: #ffc107;
/* Typography */
--font-family-base: 'Inter', sans-serif;
--font-size-base: 16px;
--font-weight-normal: 400;
--font-weight-bold: 700;
--line-height-base: 1.5;
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 3rem;
/* Borders */
--border-radius: 0.375rem;
--border-width: 1px;
--border-color: #e3e6f0;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}
/* Using variables */
.button {
background-color: var(--primary-color);
color: white;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius);
font-family: var(--font-family-base);
box-shadow: var(--shadow-sm);
}
/* Variables with fallbacks */
.theme-element {
color: var(--text-color, #333); /* Falls back to #333 if --text-color not defined */
background: var(--bg-color, var(--default-bg, white)); /* Nested fallbacks */
}
Dynamic Variables & Theming
/* Theme switching with variables */
[data-theme="light"] {
--bg-color: #ffffff;
--text-color: #333333;
--border-color: #e5e5e5;
}
[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #ffffff;
--border-color: #404040;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Component-scoped variables */
.card {
--card-padding: 1.5rem;
--card-bg: white;
--card-shadow: var(--shadow-md);
padding: var(--card-padding);
background: var(--card-bg);
box-shadow: var(--card-shadow);
}
.card.compact {
--card-padding: 0.75rem; /* Override for compact variant */
}
/* Responsive variables */
:root {
--container-width: 100%;
}
@media (min-width: 768px) {
:root {
--container-width: 750px;
}
}
@media (min-width: 1024px) {
:root {
--container-width: 1200px;
}
}
.container {
max-width: var(--container-width);
margin: 0 auto;
}
Modern Features
Modern CSS Features
/* CSS logical properties */
.logical-spacing {
margin-block-start: 1rem; /* top in LTR, bottom in RTL */
margin-block-end: 1rem; /* bottom in LTR, top in RTL */
margin-inline-start: 2rem; /* left in LTR, right in RTL */
margin-inline-end: 2rem; /* right in LTR, left in RTL */
padding-block: 1rem; /* top and bottom */
padding-inline: 2rem; /* left and right */
border-inline-start: 2px solid blue; /* left border in LTR */
}
/* CSS aspect-ratio */
.aspect-ratio-box {
aspect-ratio: 16 / 9; /* 16:9 aspect ratio */
width: 100%;
}
.square {
aspect-ratio: 1; /* 1:1 square */
}
/* CSS clamp() function */
.responsive-text {
font-size: clamp(1rem, 2.5vw, 2rem); /* Min 1rem, preferred 2.5vw, max 2rem */
}
.responsive-spacing {
margin: clamp(1rem, 5%, 3rem);
}
/* CSS min(), max(), and calc() */
.flexible-width {
width: min(100%, 800px); /* Smaller of 100% or 800px */
height: max(200px, 50vh); /* Larger of 200px or 50vh */
margin: calc(1rem + 2px); /* Calculated value */
}
/* CSS scroll-behavior */
html {
scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}
/* CSS backdrop-filter */
.glass-effect {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
Pseudo-classes & Elements
Advanced Pseudo-selectors
/* Structural pseudo-classes */
.item:first-child { margin-top: 0; }
.item:last-child { margin-bottom: 0; }
.item:only-child { margin: 0; }
.item:nth-child(odd) { background: #f9f9f9; }
.item:nth-child(even) { background: white; }
.item:nth-child(3n) { border-right: none; } /* Every 3rd item */
.item:nth-last-child(2) { border-bottom: none; } /* 2nd from last */
/* Type-based pseudo-classes */
p:first-of-type { font-weight: bold; }
p:last-of-type { margin-bottom: 0; }
img:only-of-type { display: block; margin: 0 auto; }
/* State pseudo-classes */
input:valid { border-color: green; }
input:invalid { border-color: red; }
input:required { background: #fffacd; }
input:optional { background: white; }
input:disabled { opacity: 0.5; cursor: not-allowed; }
input:checked + label { font-weight: bold; }
/* Advanced pseudo-classes */
.nav-item:is(.active, .current) { color: blue; }
.nav-item:not(.disabled) { cursor: pointer; }
.card:where(.featured, .highlighted) { border: 2px solid gold; }
.link:has(img) { display: block; } /* Links containing images */
/* Pseudo-elements */
.quote::before {
content: '"';
font-size: 1.2em;
color: #666;
}
.quote::after {
content: '"';
font-size: 1.2em;
color: #666;
}
.heading::first-letter {
font-size: 2em;
font-weight: bold;
float: left;
margin-right: 8px;
}
.paragraph::first-line {
font-weight: bold;
color: #333;
}
input::placeholder {
color: #999;
font-style: italic;
}
Best Practices
CSS Best Practices
/* ✅ Good: BEM methodology */
.card { /* Block */ }
.card__header { /* Element */ }
.card__title { /* Element */ }
.card--featured { /* Modifier */ }
.card__button--primary { /* Element with modifier */ }
/* ✅ Good: CSS custom properties for maintainability */
:root {
--primary-color: #007bff;
--border-radius: 0.375rem;
}
.button {
background: var(--primary-color);
border-radius: var(--border-radius);
}
/* ✅ Good: Mobile-first responsive design */
.container {
width: 100%; /* Mobile default */
}
@media (min-width: 768px) {
.container { max-width: 750px; }
}
/* ✅ Good: Performance optimizations */
.animated-element {
will-change: transform; /* Hint for browser optimization */
transform: translateZ(0); /* Force GPU acceleration */
}
/* ❌ Bad: Avoid !important unless absolutely necessary */
.bad-override {
color: red !important; /* Hard to override, creates specificity issues */
}
/* ✅ Good: Use specificity naturally */
.card .card__title {
color: #333; /* Natural specificity */
}
/* ✅ Good: Semantic, accessible markup considerations */
button:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
🎨 Modern CSS Mastery Tips
- • Use CSS Grid for 2D layouts, Flexbox for 1D layouts
- • Implement CSS custom properties for consistent theming
- • Follow mobile-first responsive design principles
- • Use semantic class names (BEM methodology recommended)
- • Optimize animations with `transform` and `opacity` properties
- • Leverage modern features like `clamp()`, `aspect-ratio`, and `container queries`
- • Consider accessibility with focus states and reduced motion preferences
- • Use logical properties for better internationalization support
🚀 CSS Excellence
Modern CSS provides powerful tools for creating responsive, maintainable, and performant web layouts. Master these techniques to build beautiful, accessible user interfaces.