CSS VARIABLES : Custom Properties

 WHAT ARE CSS VARIABLES? 

   Let us break this down for our newbies. Let's start from VARIABLES i.e the head-word. Variables are memory locations for storing data. They act as containers for holding different types of information, such as numbers, text, or more complex data structures. Variables are an essential concept in programming and are used to perform various tasks, calculations, and data manipulation. Wow!

   Now CSS, this stands for Cascading Style Sheet. It is used for styling and designing your web page. It works hand in hand with HTML! The current version is CSS3.

   CSS Variables, also known as Custom Properties, is a feature in CSS that allows you to define reusable values and use them throughout your stylesheet. They provide a way to make your CSS more maintainable and dynamic by centralizing values in one place, which can be especially helpful for theming and responsive design.

   

Defining CSS Variables:

To define a CSS variable, use the -- prefix followed by a name and assign a value to it. Because every variable should have a name! For example:

css

:root {

  --main-bg-color: #3498db;

  --text-color: #ffffff;

}


Here, we define two variables: 

 --main-bg-color and --text-color.


Using CSS Variables:

You can use CSS variables within your styles by referencing them with the var() function. For example:

css

body {

  background-color: var(--main-bg-color);

  color: var(--text-color);

}

Now, this will set the background color for the body element to be #3498db . 



Dynamic Updating:


One of the most powerful features of CSS variables is their ability to dynamically change values with JavaScript. You can modify the values of CSS variables using JavaScript, and it will instantly update the styles across your webpage.


Fallback Values:


You can provide fallback values for CSS variables by using a second argument in the var() function. For example:

css

color: var(--text-color, #000000); / Fallback to #000000 if --text-color is not defined /



Scope:

CSS variables are scoped to the element they are defined on and can be inherited by child elements.


Use Cases:

1. Theming: Easily switch between light and dark themes by changing variable values.

2. Responsive Design: Adjust layout and sizing based on screen size.

3. Consistency: Maintain a consistent design language by reusing colors, fonts, and other values.


Browser Support:

CSS variables are well-supported in modern browsers, but you may need to provide fallbacks for older browsers.


Example:

css

:root {

  --primary-color: #007bff;

}


body {

  background-color: var(--primary-color,#111111);

}


button {

  background-color: var(--primary-color,#111111);

  color: #ffffff;

}



Conclusion:

CSS variables provide a powerful way to manage and maintain your styles, making your CSS more modular and adaptable. They are a valuable tool for creating consistent and dynamic web designs. They can also be used with other functions like THE calc() function! 


Comments

Post a Comment

Popular posts from this blog

GreX Tutorial : Hello World in HTML

 HELLO WORLD IN HTML     Actually, Hello World in programming refers to the first ever project you do when learning a programming language. Now you can understand some memes. LoL! Let's start: <!DOCTYPE html> <html> <head> <title>First Page Title</title> </head> <body> <p> Hello World!</p> </body> </html> Let me explain what is happening here then next I will tell you how you can create yours. Code Explained: So, the document starts with THE HTML5 DECLARATION that we considered previously. i.e  <!DOCTYPE html> Then, the next is the html tags. If you look very carefully, you would notice that every other tag goes into these two tags: <html> </html> It signifies the beginning and ending of the HTML code. It encloses other tags. Now, every HTML document is divided into t...
Read more

GreX Tutorial : WEB DEVELOPMENT

INTRODUCTION:  WEB DEVELOPMENT      The WEB refers to the major part of the internet. It allows us to send and receive information via a WEB BROWSER like CHROME, FIREFOX, EDGE etc. As we all know, communication must have two endpoints, The SENDER and The RECEIVER. Under WEB standards, the SENDER is usually referred to as THE SERVER while the receiver is called THE CLIENT.      When you input www.example.com into your web browser's search box. Firstly, the web browser translates the web address to an IP address so as to identify the server on the Internet. Once this is done, the web browser (THE CLIENT), sends a request to the server that identifies as www.example.com asking for a webpage, in this example, it is the HOMEPAGE. The server on the other hand, receives this request and searches its directory for the HOMEPAGE. Once ready, it sends this response to the client (your web browser). Then the web browser processes this information and displays...
Read more

GreX Tutorial : Introduction to HTML

INTRODUCTION TO HTML    HTML stands for Hyper Text Mark-up Language. It is a programming language used to structure web pages. As a programming language, it gives instructions to the web browser on how to display its content to the users.   It defines where each element of the web page like buttons, text, links, paragraphs e.t.c should be placed. Just like arranging parts in a car. With this language, you can create websites. It is usually associated with Front-end development but personally, no matter your field, you should have knowledge about it.  An HTML document usually contain tags. Each tag has a different function but all work together for the proper functioning and looks of the page. The tags usually come in pairs like this: <tagname> THE CONTENT </tagname> Note the slash in the second tag!!    The current and most recent version of HTML is THE HTML5! A document ...
Read more