CSS Tutorial
20 Topics- CSS Tutorial Overview
- CSS Introduction
- CSS Fundamentals
- CSS Selectors
- CSS Colors & Backgrounds
- CSS Text & Fonts
- CSS Box Model
- CSS Display & Positioning
- CSS Flexbox
- CSS Grid
- CSS Sizing & Layout
- CSS Lists & Tables
- CSS Transitions & Animations
- CSS Responsive Design
- CSS Advanced Styling
- CSS Functions
- CSS for Accessibility & Print
- CSS Architecture & Methodologies
- CSS Preprocessors & Tools
- CSS Modern & Experimental CSS
Modern CSS Functions & Math Expressions
Empower stylesheets with native mathematical computations, fluid typography with clamp(), dynamic custom property chaining, and mobile safe-area insets.
1. CSS Math Functions: calc(), min(), max(), and clamp()
Modern CSS eliminates the need for JavaScript window resize listeners by performing real-time math directly in the style calculation phase:
| Function | Behavioral Logic | Syntax Example |
|---|---|---|
calc() | Performs arithmetic (+, -, *, /) mixing dissimilar units (e.g. percentages with pixels). | width: calc(100% - 48px); |
min() | Evaluates a comma-separated list of expressions and selects the smallest computed value. | width: min(100%, 800px); |
max() | Evaluates a comma-separated list of expressions and selects the largest computed value. | padding: max(16px, 4vw); |
clamp() | Takes three arguments: minimum floor, preferred fluid rate, and maximum ceiling: clamp(MIN, VAL, MAX). | font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem); |
Fluid Typography without Media Queries:
By setting font-size: clamp(1.25rem, 3vw + 1rem, 3rem), font sizes scale continuously in real time as the viewport changes width:
CSS Example
/* Fluid Typography with clamp() */
.fluid-title {
font-size: clamp(1.25rem, 2.5vw + 1rem, 2.5rem);
font-weight: 800;
color: #1e3a8a;
margin-bottom: 8px;
}
.math-container {
width: calc(100% - 20px);
max-width: min(100%, 500px);
background: #f0fdf4;
border: 1px solid #86efac;
padding: clamp(12px, 3vw, 24px);
border-radius: 8px;
}2. Custom Property Access: var() and Fallback Chaining
The var() function retrieves custom properties, supporting a second parameter for graceful fallback if the custom property is undefined:
/* Chained Fallback Syntax */ color: var(--brand-accent, var(--brand-primary, #2563eb));
If --brand-accent is not declared, the browser looks for --brand-primary. If neither exists, it reliably applies #2563eb.
3. Mobile Safe Areas: env()
Modern mobile devices feature curved display corners, camera notches, dynamic islands, and gesture home bars. CSS Environment Variables prevent UI from colliding with hardware boundaries:
env(safe-area-inset-top): Distance from the top screen edge past camera notches.env(safe-area-inset-bottom): Clearance for mobile swipe navigation bars.env(safe-area-inset-left)&env(safe-area-inset-right): Sideways clearance in landscape mode.
/* Fixed Mobile Bottom Bar */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
/* Add safe area inset to base padding so buttons aren't blocked by home bar */
padding-bottom: max(16px, env(safe-area-inset-bottom));
background: #ffffff;
}4. Modern Color Mixing: color-mix()
The CSS Color Module Level 5 introduced color-mix(), allowing developers to blend two colors in a specified color space directly in the stylesheet:
CSS Example
/* Generating subtle tint states using color-mix */
.button-base {
background-color: #2563eb;
color: white;
padding: 12px 24px;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease;
}
/* Mix 80% blue with 20% white for hover state without hardcoding hex codes */
.button-base:hover {
background-color: color-mix(in srgb, #2563eb 80%, white);
}5. Frequently Asked Questions (FAQ)
min(), max(), and clamp() to be self-evaluating math expressions. You can nest them directly inside calc() or even perform math inside clamp() without wrapping internal terms in calc().attr() could only be used inside the content property of pseudo-elements (e.g. content: attr(data-tooltip)). CSS Values Level 4 expands attr() to support colors, lengths, and integers on any property (e.g. width: attr(data-size px)), which is progressively rolling out in browser engines.env(safe-area-inset) as 0px. To unlock edge-to-edge rendering and activate safe-area variables, your HTML viewport meta tag must include viewport-fit=cover: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">.Explore Related Tools
Hand-picked utilities and calculators related to this tool.
