Introduction to CSS Functions and Custom Properties | Custom Properties and CSS Functions

CSS functions provide built-in functionality for various tasks, such as color manipulation, calculations, and more.

Common CSS Functions

• calc(): Performs calculations on values.
• hsl(): Creates colors using hue, saturation, and lightness.
• rgb(): Creates colors using red, green, and blue values.
• rgba(): Creates colors with an alpha channel (opacity).
• hsl(): Creates colors using hue, saturation, and lightness.
• hsla(): Creates colors with an alpha channel (opacity).

Example:

CSS

.element {

  width: calc(100% – 20px);

  background-color: hsl(200, 50%, 70%);

}

CSS Custom Properties

CSS custom properties (also known as variables) allow you to define custom values that can be used throughout your stylesheet. This makes it easier to manage and update styles, especially in responsive web design.

Syntax:

CSS

:root {

  –primary-color: blue;

  –secondary-color: red;

}

.element {

  color: var(–primary-color);

  background-color: var(–secondary-color);

}

Combining Functions and Custom Properties

You can combine CSS functions and custom properties to create more dynamic and flexible styles.

Example:

CSS

:root {

  –primary-hue: 200;

  –primary-saturation: 50%;

  –primary-lightness: 70%;

}

.element {

  background-color: hsl(var(–primary-hue), var(–primary-saturation), var(–primary-lightness));

}

Benefits of Using Functions and Custom Properties

• Centralized control: Manage styles in one place.
• Responsiveness: Easily adapt styles based on screen size or user preferences.
• Maintainability: Improve code organization and readability.
• Dynamic styling: Create dynamic effects and animations.

Conclusion By effectively using CSS functions and custom properties, you can create more flexible, maintainable, and responsive web designs. Experiment with different functions and combinations to achieve the desired effects