CSS - Custom Properties: A Friendly Guide for Beginners

Hello there, future CSS wizards! ? Today, we're going to embark on an exciting journey into the world of CSS Custom Properties. Don't worry if you're new to programming – I'll be your friendly guide, and we'll take this step by step. By the end of this tutorial, you'll be amazing your friends with your CSS superpowers!

What Are CSS Custom Properties?

Let's start with the basics. CSS Custom Properties, also known as CSS Variables, are like magical containers that hold values you can use throughout your stylesheets. Imagine them as little boxes where you can store your favorite colors, sizes, or any other CSS value.

Why Use Custom Properties?

1. Reusability: Write once, use everywhere!
2. Flexibility: Change values in one place, see changes everywhere.
3. Maintenance: Easier to update and manage your styles.

Syntax: How to Declare and Use Custom Properties

Let's dive into some code! Here's how you declare a custom property:

:root {
  --my-favorite-color: #ff6347;
}

Here, we're creating a custom property called --my-favorite-color and giving it the value of a lovely tomato red. The :root selector means this variable is available throughout our entire document.

To use this property, we use the var() function:

.tomato-text {
  color: var(--my-favorite-color);
}

Now, any element with the class tomato-text will have our favorite tomato-red color!

Possible Values: What Can You Store in Custom Properties?

Custom properties are incredibly versatile. You can store almost any CSS value in them:

Value Type	Example
Colors	--main-color: #3498db;
Lengths	--spacing: 20px;
Strings	--font-family: 'Arial', sans-serif;
Numbers	--z-index: 100;
Calculations	--width: calc(100% - 20px);

Applies To: Where Can You Use Custom Properties?

The short answer? Everywhere! You can use custom properties in any CSS property value. Let's look at some examples:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --main-font: 'Helvetica', sans-serif;
  --spacing: 20px;
}

.button {
  background-color: var(--primary-color);
  color: white;
  font-family: var(--main-font);
  padding: var(--spacing);
  margin-bottom: var(--spacing);
}

.section {
  border: 2px solid var(--secondary-color);
}

CSS Custom Properties - Setting Values

You can set custom property values in your CSS, but did you know you can also set them in JavaScript? This opens up a world of dynamic styling possibilities!

// Setting a custom property value with JavaScript
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

CSS Custom Properties - Splitting Colors

Here's a neat trick: you can split colors into their components and use custom properties for each part!

:root {
  --red: 255;
  --green: 99;
  --blue: 71;
}

.tomato-background {
  background-color: rgb(var(--red), var(--green), var(--blue));
}

CSS Custom Properties - Shadows

Custom properties make complex properties like box-shadow much more manageable:

:root {
  --shadow-color: rgba(0, 0, 0, 0.2);
  --shadow-offset-x: 5px;
  --shadow-offset-y: 5px;
  --shadow-blur: 10px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-color);
}

CSS Custom Properties - Gradients

Gradients become a breeze with custom properties:

:root {
  --gradient-start: #3498db;
  --gradient-end: #2ecc71;
}

.gradient-background {
  background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
}

CSS Custom Properties - Grid

Custom properties can make your grid layouts more flexible:

:root {
  --grid-columns: 3;
  --grid-gap: 20px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}

CSS Custom Properties - Transforms

Transformations become more readable and maintainable:

:root {
  --rotate-angle: 45deg;
  --scale-factor: 1.2;
}

.transformed-element {
  transform: rotate(var(--rotate-angle)) scale(var(--scale-factor));
}

CSS Custom Properties - Concatenation of Unit Types

You can even combine custom properties with units:

:root {
  --base-size: 10;
}

.sized-element {
  width: calc(var(--base-size) * 1px);
  height: calc(var(--base-size) * 2px);
}

CSS Custom Properties - Using the Cascade

Custom properties respect the CSS cascade, meaning you can override them for specific elements:

:root {
  --text-color: black;
}

.dark-theme {
  --text-color: white;
}

p {
  color: var(--text-color);
}

CSS Custom Properties - :root

We've been using :root a lot. It's a special pseudo-class that represents the root element of the document tree, usually the <html> element. It's a great place to define global custom properties.

CSS Custom Properties - Combining With !important

Custom properties can be combined with !important:

.override-color {
  color: var(--text-color) !important;
}

CSS Custom Properties - Fallbacks

You can provide fallback values in case a custom property isn't defined:

.fallback-example {
  color: var(--undefined-color, blue);
}

CSS Custom Properties - @property

The @property rule is an exciting new feature that allows you to define the characteristics of custom properties:

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

This defines a custom property --my-color that must be a valid color value, doesn't inherit from parent elements, and has an initial value of #c0ffee.

And there you have it, my dear students! We've covered a lot of ground today, from the basics of CSS Custom Properties to some advanced techniques. Remember, the key to mastering these concepts is practice. So go forth, experiment, and create amazing designs with your new CSS superpowers!

Until next time, happy coding! ??‍??‍?

Credits: Image by storyset