CSS Variables and Custom Properties

Introduction

Hey there, future web design wizards! 🌟 Today, we're going to uncover a magical feature of CSS called CSS Variables (sometimes known as Custom Properties). Just like in math, where we use letters to stand for numbers, CSS Variables let us use names to stand for values in our styles. This makes our code cleaner and easier to change!

What's so special about CSS Variables?

Reusable: You can set a value once and use it in multiple places.
Easy to Change: Change the variable in one place, and it automatically updates everywhere it's used!
Dynamic: They're flexible and can change based on user actions or media queries.

Ready to dive in? Let's go!

Concept Explanation

What is a CSS Variable?

CSS Variables are defined using a custom property syntax, which begins with two dashes (–). For example:

--main-color: red;

In this example, --main-color is the variable name, and its value is red. You can then use this variable in your styles.

How to Use CSS Variables

Define the Variable: You usually define your variables within a selector, often :root which represents the highest level in the HTML document.
Use the Variable: Use the var() function to access the variable's value anywhere in your stylesheet.

Here's how it all ties together:

Example

Let's create a simple example of a webpage that uses CSS Variables.

CSS Code Sample

:root {
    --main-color: #3498db;  /* A nice blue */
    --secondary-color: #2ecc71; /* A calming green */
    --font-family: 'Arial, sans-serif';
}

body {
    font-family: var(--font-family);
    background-color: var(--main-color);
    color: white;
}

h1 {
    color: var(--secondary-color);
}

button {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: var(--main-color);
}

Explanation of the Code:

In the :root section, we define three CSS Variables for colors and font family.
We then use these variables throughout our styles for the body, h1, and button elements.
When the button is hovered over, it changes color dynamically using the variables.

Practical Exercise: Create a Color Palette!

Task:

Let's create a simple webpage using CSS Variables! Follow these steps:

Set Up Your HTML: Create a basic HTML file (index.html) with the following structure:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Variables Demo</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Welcome to My Color Palette</h1> <button>Click Me!</button> </body> </html>
Add CSS: Create a CSS file (styles.css) and use the CSS code from the example above.
Customize It:
- Change the color values of --main-color and --secondary-color to your favorite colors (you can use color codes or names!).
- Change the button's padding and border radius to see how it affects the button's size and shape.
Save and Open It: Save your files and open index.html in your web browser.

Celebrate Your Success!

Now, whenever you want to change the theme of your webpage, you can simply change the variable values in one spot, and the whole website will automatically update!

Recap

Today, we learned how to use CSS Variables (Custom Properties) to make our styles cleaner and more maintainable. Remember:

Define variables using -- in the :root.
Use them with the var() function.
They help you save time and work smarter in your web design journey!

Keep practicing, and soon you'll be creating beautiful websites like a pro. Happy coding!

css3 Topics

css3 Tutorial