CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Variables

The CSS var() function can be used to insert the value of a custom property instead of any part of a value of another property.

The variable name must begin with two dashes (--) and is case sensitive.

CSS Syntax:
var(custom-property-name, value)
  • custom-property-name: specifies the custom property's name (must start with two dashes)
  • value: An optional second argument to the function serves as a fallback value. If the custom property referenced by the first argument is invalid, the function uses the second value

In the following example we have two global custom properties named "--main-bg-color" and "--my-padding":

Run code

Browser compatibility

The numbers in the table specify the first browser version that fully supports the var() function:

Function
var() 49 31 36 9.1 15