Css Functions | Intermediate | Html Css Tutorial

Using CSS functions like calc() and var()

CSS functions allow you to perform calculations, manipulate colors, and access custom properties. This tutorial covers how to use CSS functions like calc() and var() effectively.

Key Points:

calc() allows you to perform calculations in your CSS.
var() allows you to use CSS custom properties (variables).
Combining CSS functions enhances the flexibility and maintainability of your styles.

Using calc()

The calc() function allows you to perform calculations to determine CSS property values. It supports addition (+), subtraction (-), multiplication (*), and division (/).

Example:


.element {
    width: calc(100% - 50px);
    height: calc(50vh + 20px);
    margin: calc(10px * 2);
}

This element uses calc() for its dimensions and margin.

Using var()

The var() function allows you to use CSS custom properties (variables) within your styles. This makes your CSS more flexible and easier to maintain.

Example:


:root {
    --main-color: #3498db;
    --secondary-color: #2ecc71;
    --padding: 20px;
}

.element {
    color: var(--main-color);
    background-color: var(--secondary-color);
    padding: var(--padding);
}

This element uses CSS variables.

Combining calc() and var()

You can combine calc() and var() to create dynamic and flexible styles:

Example:


:root {
    --base-size: 10px;
    --spacing: 1.5;
}

.element {
    width: calc(100% - var(--base-size) * 2);
    padding: calc(var(--base-size) * var(--spacing));
}

This element combines calc() and var() for its styles.

Using CSS Color Functions

CSS also provides functions for manipulating colors, such as rgb(), rgba(), hsl(), and hsla().

Example:


.element {
    background-color: rgba(52, 152, 219, 0.8);
    color: hsl(120, 100%, 50%);
}

This element uses CSS color functions.

Example: Responsive Design with calc() and var()

Here is a complete example demonstrating responsive design using calc() and var():


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Design with CSS Functions</title>
    <style>
        :root {
            --base-size: 16px;
            --spacing-unit: 1.5;
        }

        body {
            font-size: var(--base-size);
        }

        .responsive-element {
            width: calc(100% - var(--base-size) * 2);
            padding: calc(var(--base-size) * var(--spacing-unit));
            background-color: #f4f4f4;
            margin: var(--base-size);
        }

        @media (min-width: 768px) {
            :root {
                --base-size: 18px;
            }
        }

        @media (min-width: 1024px) {
            :root {
                --base-size: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="swf-lsn-responsive-element">
        This element uses calc() and var() for responsive design.
    </div>
</body>
</html>

Summary

In this tutorial, you learned how to use CSS functions like calc() and var() effectively. These functions allow you to perform calculations, use CSS variables, and create dynamic, flexible styles. Understanding and using these CSS functions enhances your ability to create responsive and maintainable stylesheets.

HTML CSS - CSS Functions

Using CSS functions like calc() and var()

Using calc()

Using var()

Combining calc() and var()

Using CSS Color Functions

Example: Responsive Design with calc() and var()

Summary