8. CSS Attribute Selectors, Units & Math Functions

calc(), min(), max(), clamp(), units (rem, em, vw, vh), specificity & !important

Module 1: CSS Math Functions (calc, min, max, clamp)

Performing calculations to determine CSS property values.

Core Theory & Principles

calc(): calculates mathematical expression (width: calc(100% - 40px)).
clamp(min, val, max): clamps a value between defined min and max bounds.
Relative Units: rem (root element font size), em (parent font size), vw (viewport width).

Practical Key Takeaways

Mastering CSS Math Functions (calc, min, max, clamp) builds fundamental development capability. Review practical code and outputs carefully.

💻 Practical Code Example - CSS Math Functions (calc, min, max, clamp)

<div style="background: rgb(30, 41, 59); padding: calc(10px + 5px); border-radius: 8px; color: white;">
    <h3 style="font-size: clamp(1.2rem, 3vw, 2rem); color: rgb(56, 189, 248);">Fluid Typography with clamp()</h3>
    <p>Container padding calculated using calc(10px + 5px).</p>
</div>

📤 Expected Output / Browser Rendered Result:

Output Verified Cleanly.