HTML & CSS - Mastery / Advanced CSS Features

CSS Variables and Functions

📦 Understanding CSS Variables and Functions

CSS Variables allow you to store values (like colors, sizes, fonts) in reusable variables directly in your CSS.

🔹 Key Concepts

  • Custom properties start with —

  • Variables are defined using standard CSS syntax

  • Scoped to elements (can be global or local)

  • Accessed using the var() function

  • Useful for maintainable and scalable design systems

🔹 Defining Global Variables and Using CSS Variable

Global variables are usually defined inside the :root selector to be available across the entire document.

🔹 Fallback Values

You can provide a fallback if the variable is not defined:

🔹 Overriding Variables with Inheritance

You can redefine a variable in a more specific context to override its value:

🔍 Explanation: ( Lets understand it as light and dark theme toggle)

  • :root defines the default value for the variable -theme-bg (used for the light theme).

  • When .dark-mode is added to a parent element like <section>, the -theme-bg is overridden to black.

  • The section uses the variable with var(--theme-bg) — so it automatically picks the right value depending on the theme.

✅ Summary of Benefits

  • Centralised control of styling values

  • Easier theme switching (e.g., light/dark modes)

  • More readable and maintainable CSS

  • Avoids repeating values in multiple places

🧠 CSS Functions

CSS functions are built-in methods that take arguments and return values to dynamically compute styles. They're used inside property values like width, transform, calc(), etc.

🔧 Common CSS Functions

1. 🔢 calc()

Used to perform mathematical operations.

width: calc(100% - 50px);

➡️ Calculates a value by combining units (%, px, em, etc.)

2. 🎨 var()

Accesses the value of a CSS custom property (variable).

--main-color: #3498db;
color: var(--main-color);

3. 🌈 rgb(), rgba(), hsl(), hsla()

Define color values using red/green/blue or hue/saturation/lightness.

background-color: rgba(255, 0, 0, 0.5);

4. 🔄 url()

Used to embed external resources (e.g., images, fonts).

background-image: url("hero.jpg");

5. 💃 attr()

Used in content generation with pseudo-elements (limited support).

content: attr(data-label);

6. 🧮 min(), max(), and clamp()

Useful for responsive design with fluid values.

width: min(90%, 500px);
font-size: clamp(1rem, 2vw, 2rem);

  • min() → Picks the smallest value

  • max() → Picks the largest value

  • clamp(min, preferred, max) → Picks a value within a range

✨ Summary Table

Function

Purpose

Example

calc()

Math operations in CSS

width: calc(100% - 50px);

var()

Custom properties (variables)

color: var(--theme);

rgb()

Color in red/green/blue

rgb(255, 99, 71)

url()

External assets

background: url(img.jpg);

clamp()

Responsive scaling with limits

font-size: clamp(1rem, 2vw, 2rem)

attr()

Inject attribute content

content: attr(title);