HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Calc & Functions

CSS calc() and Functions

CSS has evolved beyond simple static values. You can now perform math directly in your stylesheet using the calc() function!

The `calc()` Function

Allows you to calculate lengths, percentages, and times. The true power of calc() is mixing different units. For example, you can tell an element to be exactly 100% of the screen width MINUS 50 pixels: width: calc(100% - 50px);

Other Useful Functions

min() / max(): Selects the smallest/largest value from a list of options.
clamp(min, preferred, max): Incredibly useful for fluid typography (text that grows/shrinks smoothly between a min and max size).

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; font-family: Arial; background: #2c3e50; color: white; }
    
    /* Header taking exactly 80px */
    .header { height: 80px; background: #e74c3c; line-height: 80px; text-align: center; font-size: 24px; font-weight: bold; }
    
    /* Sidebar taking exactly 250px */
    .sidebar { width: 250px; background: #34495e; float: left; /* Using float for demo purposes */ }
    
    /* Main Content using CALC() */
    .content {
      /* Width is exactly the remaining screen width minus the sidebar! */
      width: calc(100% - 250px);
      /* Height is exactly the remaining screen height minus the header! */
      height: calc(100vh - 80px);
      
      float: left;
      background: #ecf0f1;
      color: #333;
      padding: 40px;
      box-sizing: border-box;
    }
    
    /* Fluid Typography using CLAMP() */
    .fluid-text {
      /* Font size will be 5vw, but never smaller than 20px and never bigger than 60px */
      font-size: clamp(20px, 5vw, 60px);
      font-weight: bold;
      color: #2980b9;
    }
  </style>
</head>
<body>

<div class="header">Top Header (Fixed 80px Height)</div>
  <div class="sidebar" style="height: calc(100vh - 80px);">Sidebar (Fixed 250px Width)</div>
  <div class="content">
    <div class="fluid-text">Fluid Typography via Clamp()!</div>
    <p>Resize the browser window to see the text smoothly shrink and grow without media queries!</p>
    <p>Also notice how the layout perfectly fills the screen using calc() to subtract fixed pixel values from 100% widths and viewport heights.</p>
  </div>

</body>
</html>

Result

Topics

Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz