HOW TO USE CSS VARIABLES

CSS VARIABLES

Designing complex websites with a lot of styling that are often repeated can become stressful and exhausting. This is where the custom properties of css variables comes to save the day with the use of css variables or cascading variables.

WHAT ARE CSS VARIABLES?

CSS VARIABLES are custom properties of CSS that enables a user to define a data(customizable name) and assign a particular value(property)to it for easy and faster access in a document. CSS variables are useful especially when a particular styling is repeated when designing elements.

Css variables enables you to make general changes to your code without having to repeat the code over and over again.

For example, if you intend to use some specific colours to style the contents of your site, then you need not write the code to do this anytime you want to do this, CSS variables enables you to define a 'storage point' for this data(colours) so that you can access and use them to style your contents easier and faster.

HOW TO USE CSS VARIABLES

THE ROOT PSEUDO CLASS:

The root pseudo class is used in the css file either internally or externally. It contains the variables used to define the style (name and the value) that will be used in styling of the intended elements.
It is represented as thus:
:root{}

DEFINING THE VARIABLES:

Firstly, in defining the variables which hold the name and the value of the variables, the name of the variables is customizable and can be named desirably, but needs to follow a specific syntax :
The name is preceeded by two dashes or hyphens like this --

• You can them proceed to name it, for example : --header

NOTE:
-It can begin with a letter or an underscore
-The name is case sensitive

• Although the variable can be named whatever you want given you follow the rules , it is always appropriate to give your variable a name that describes its function. For example, for a variable that will be used to modify the main colour of the content of your document, it can be named '--main-text-colour'.

When concatenating(adding more than one word to the name), it should then be joined by adding a - to it, for example:
--header-background or
--header-text-background.

After assigning a name to the variable, then a value should then be added to it using the normal standard of the name to the value pair, for example:

:root{ --header-background: green ;

--box-padding: 10px 5px; }

NOTE: The variable here has been defined by adding a name and a value pair to it, but has not been used to style any elements.

USING THE VARIABLES TO STYLE ELEMENTS:

Previously, we defined the variable to have a name of '--header-background' and a value of a green colour assigned to it. When using this to style your element, for example a header:

-You put in the name of the property you intend styling: background,color, font properties, etc.

-Then instead of assigning the custom values of that property, you substitute the defined variable containing the value you desire to use. This is done using the var() function.

ACCESSING YOUR VARIABLES USING THE VAR() FUNCTION:

You can access your custom variables using the var() function by writing in the variable name in the brackets.

This is an example of the variable being used to style the page that follows

THE CODE:

THE RESULTS:

So far, we have talked about using the :root pseudo-class to define variables used for a global scope(scope is where a variable is available in your code, a global scope in this context just simply means a general place where the use of a variable can be accessed by all the elements in your document). In a case, where you would want to define the variables and access it in a specific section or a div of the document, then the approach to doing this would be to

-Define the variables in the div directly, in this case the root pseudo element would not be needed since it is not a global scope anymore.

THE CODE:

THE RESULTS:

• After defining the variables in the div or section scope, you can use them to style the contents in your document either in that same scope or a new block scope of that same element.

THE CODE:

THE RESULT:

CONCLUSION:

Although this is not an in depth explanation of the whole theory of css variables, i hope this content has been able to give you an overview of the concept of css variables, how to use them basically and the benefits of using them. Keep learning and goodluck!!