CSS variables, also known as custom properties, are a powerful feature in CSS that allows you to define reusable values, making your code cleaner and more maintainable. They can store values like colors, fonts, or even complex values like gradients, which can then be used throughout your stylesheet.
How To Define CSS Variables?
CSS variables are defined using the -- prefix and can be declared globally in the :root selector or scoped to specific elements.
Example
:root { --primary-color: #3498db; --font-size: 16px; }
In CSS, :root is a pseudo-class that represents the top-level element in the document, typically the <html> element. It allows you to define global CSS variables that can be accessed throughout the entire document. By defining variables in :root, we can ensure that they are available everywhere, making it convenient to manage styles across multiple components or sections.
In this example, Here, --primary-color and --font-size are CSS variables defined globally, so we can use them anywhere in your CSS with var(--primary-color) and var(--font-size).
How to refer the variables?
You can refer the variables using var keyword.
body { color: var(--primary-color); font-size: var(--font-size); }
color: var(--primary-color);
This sets the text color of the <body> element to the value of the --primary-color CSS variable, which was defined as #3498db in :root. So, any text within the <body> will display in the color #3498db (a shade of blue).
font-size: var(--font-size);
This sets the font size of text in the <body> to the value of the --font-size variable, defined as 16px in :root. This means all text in the <body> will have a base font size of 16px, unless otherwise overridden by other styles.
css-variables.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Variables</title> <style> :root { --primary-color: #3498db; --font-size: 16px; --font-family: Arial, sans-serif; --background-color: #f0f0f0; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 90vh; background-color: var(--background-color); font-family: var(--font-family); color: var(--primary-color); } </style> </head> <body> <h1>Interactive Elements Example</h1> </body> </html>
Above snippet is rendered like below.
No comments:
Post a Comment