Latest updates from Cleonix Technologies
Never Suffer From CSS VARIABLES

The var() function is used to insert the value of a custom property.Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you have to use either the :root or the body selector.
Like other variables in any other programming language CSS variables also allow us to store a value and then use it later in our code. A CSS variable stores any CSS property value, like color, size, font-family, position, etc.
The syntax of CSS Custom properties is simple and concise.CSS variables are prefixed with double dashes ( – – ) and you can access them using the var() function.
Check the syntax of the var() function is as below:

var(custom-name, value)

Complex websites have a vast amounts of CSS, often with a lot of repeated values. As example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. Custom properties let a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic identifiers. For example,

:root {
–main-bg-color: red;

#div1 {
background-color: var(–main-bg-color);

#div2 {
background-color: var(–main-bg-color);
When the browser showdown an invalid var() substitution, the initial or inherited value of the property is used.
Since April 2017, this property is supported by all modern browsers, they provide an effective way to write consistent, clean styles.The following first browser versions fully support CSS variables => Chrome 49.0, Internet Explorer 15.0, Mozilla Firefox 31.0, Safari 9.1, Opera 36.0

“Cleonix Academy” under “Cleonix Technologies” is a Kolkata based Web design training institute specializing in Website Design, Graphic Design, Web Development, Digital Marketing, Search Engine Optimization.For learning more about HTML & CSS contact now.

About the author


Leave a Reply

Your email address will not be published. Required fields are marked *

Latest Post
digital marketing

Basic overview of digital marketing everyone needs to know

Posted on 15 Jan 2021

Top trending java frameworks for 2021

Posted on 11 Jan 2021

web design

Find the best web designing company in Kolkata to build your own website

Posted on 15 Dec 2020

app development Appreciation from UNICEF basics of digital marketing Bengali New Year best web design company in saltlake best web designing company in kolkata Bhai dooj blogging blogging tips blogging tutorial Bootstrap cleonix technologies Cross-Browser Compatibility Css3 Dhanteras digital marketing digital marketing tutorial Diwali Durga Puja E-Commerce Eid Mubarak favicon Gandhi Jayanti Ganesh Chaturthi GIF Graphics design Happy Holi Happy Teacher's Day HTML5 Independece day information technology iOS iOS app development iOS benefits IT blogs Janmasthami java framework java frameworks 2021 java learning java tutorial JPEG learn blogging Logo Design Magento magento 2 magento with google shopping meta tags Mother's Day Nationbuilder off page seo off-page seo techniques online marketing osCommerce PHP PNG ppc Pray for Chennai professional web design Raksha Bandhan Responsive Website Design SEO SEO tips in 2020 software tools Subho Noboborsho SVG UI UX virtual assistant virtual assistant monitoring web design web design in kolkata Web Development Website Design Website Development Woo Commerce Wordpress