Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Variables

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      Variables

      CSS variables are custom properties that allows you to store and reuse values throughout your CSS program. CSS variables are similar to variables in other programming languages.
      They are set using the -- prefix, and accessed using the var() function.
      To declare a CSS variable, use the following syntax:
      --variable-name: value;
      To use a CSS variable with var() function, use the following syntax:
      var(--variable-name, fallback-value);
      Custom properties are affected by the CSS cascade and inherit their value from their parent element.
      CSS variables cannot be used in media queries or container queries, but you can use the var() function to replace values within CSS properties on an element. You cannot use them to set the name of a CSS property or selector, or to define a media query or container query.

      CSS Variables - Standard Approach

      The following example demonstrates CSS that applies the same color to elements of different classes 
      <html>
      <head>
      <style>
         .box {
            width: 400px;
            height: 200px;
            text-align: center;
            line-height: 35px;
            margin: 10px;
            background-color: pink;
            color: blue;
         }
         .box1 {
            display: inline-block;
            background-color: yellow;
            width: 100px;
            height: 50px;
            color: blue;
         }
         .box2 {
            display: inline-block;
            background-color: yellow;
            width: 100px;
            height: 50px;
            color: blue;
         }
      </style>
      </head>
      <body>
         <div class="box">
            <h2>Tutorialspoint</h2>
            <p>How to code a website using HTML and CSS</p>
            <div class="box1">HTML</div>
            <div class="box2">CSS</div>
         </div>
      </body>
      </html>

      CSS Variables - :root Pseudo-class

      CSS variables are declared at the top of the stylesheet using the :root selector, which matches the root element of the document. This means that CSS variables declared using the :root selector can be used by any element in the document.
      CSS variable names are case-sensitive, which means that --pink-color and --Pink-color are two different variables.
      Step-1: Define the custom properties
      To declare variables using the :root pseudo-class, you simply add the -- prefix to the variable name and then set its value.
      :root {
         --pink-color: pink;
         --blue-color: blue;
      }
      Step-2: Use the custom properties in the CSS
      These variables can then be used throughout your CSS code using the var() function.
      .box {
         width: 400px;
         height: 200px;
         background-color: var(--pink-color);
         color: var(--blue-color);
      }
      .box1, .box2 {
         display: inline-block;
         background-color: var(--pink-color);
         width: 100px;
         height: 50px;
         color: var(--blue-color);
      }
      The following example demonstrates that the CSS variables --pink-color and --blue-color are declared in the :root element, which means they are global custom properties that can be used anywhere in the CSS code 
      <html>
      <head>
      <style>
         :root {
            --pink-color: pink;
            --blue-color: blue;
         }
         .box {
            width: 400px;
            height: 200px;
            text-align: center;
            line-height: 35px;
            margin: 10px;
            background-color: var(--pink-color);
            color: var(--blue-color);
         }
         .box1, .box2 {
            display: inline-block;
            border: 3px solid yellow;
            background-color: var(--pink-color);
            width: 100px;
            height: 50px;
            color: var(--blue-color);
         }
      </style>
      </head>
      <body>
         <div class="box">
            <h2>Tutorialspoint</h2>
            <p>How to code a website using HTML and CSS</p>
            <div class="box1">HTML</div>
            <div class="box2">CSS</div>
         </div>
      </body>
      </html>

      CSS Variables - Inheritance of Custom Properties

      You can use CSS variables to define reusable CSS values that can be inherited by child elements.
      Step-1: Declare the custom property in the :root selector.
      This makes the variable global and accessible to all elements in the document.
      :root {
         --pink-color: pink;
      }
      Step-2: Use the var() function to access the custom property in the CSS.
      This allows you to reuse the custom property throughout your CSS code.
      .box {
         --box-background: var(--pink-color);
         background-color: var(--box-background);
      }
      Step-3: Override the custom property value for specific elements using the -- prefix.
      This allows you to customize the value of the custom property for specific elements.
      .box1, .box2 {
         background-color: var(--box-background);
      }
      The following example demonstrates that the use of CSS custom properties with inheritance 
      <html>
      <head>
      <style>
         :root {
            --pink-color: pink;
         }
         .box {
            --box-background: var(--pink-color);
            
            color: black;
            width: 400px;
            height: 200px;
            text-align: center;
            line-height: 35px;
            margin: 10px;
            background-color: var(--box-background);
         }
         .box1, .box2 {
            color: blue;       
            display: inline-block;
            border: 3px solid yellow;
            background-color: var(--box-background);
            width: 100px;
            height: 50px;
         }
      </style>
      </head>
      <body>
         <div class="box">
            <h2>Tutorialspoint</h2>
            <p>How to code a website using HTML and CSS</p>
            <div class="box1">HTML</div>
            <div class="box2">CSS</div>
         </div>
      </body>
      </html>

      CSS Variables - Custom Property Fallback Value

      You can use CSS variables with fallback values to ensure that your CSS code is still valid and works even if the variable is not defined.
      CSS fallback values are not used to make CSS custom properties work in older browsers. They are only used as a backup in browsers that support CSS custom properties, in case the variable is not defined or has an invalid value.
      CSS variable fallback values can be specified using commas. For example, the var(--pink-color, blue, pink) function defines a fallback value of blue, pink. The fallback value is the text that appears between the first comma and the end of the function.
      In below example, If the --pink-color or --blue-color custom properties are not defined, the fallback values of red and green will be used, respectively.
      Here is an example 
      <html>
      <head>
      <style>
         :root {
            --pink-color: pink;
            --blue-color: blue;
         }
         .box {
            width: 400px;
            height: 200px;
            text-align: center;
            line-height: 35px;
            margin: 10px;
            background-color: var(--pink-color, red); 
            color: var(--blue-color, green ); 
         }
         .box1, .box2 {
            display: inline-block;
            border: 3px solid yellow;
            background-color: var(--pink-color, red); 
            width: 100px;
            height: 50px;
            color: var(--grey-color, brown); 
         }
      </style>
      </head>
      <body>
         <div class="box">
            <h2>Tutorialspoint</h2>
            <p>How to code a website using HTML and CSS</p>
            <div class="box1">HTML</div>
            <div class="box2">CSS</div>
         </div>
      </body>
      </html>

      CSS Variables - Handling Invalid Custom Properties

      In below example, the --red-color custom property is defined with a value of 15px. This is an invalid value because the red color property only accepts color values.
      However, the browser will not be able to resolve the value of the custom property because it is invalid. As a result, it will simply ignore the CSS rule and the text in the second h2 element will remain the same color.
      Here is an example 
      <html>
      <head>
      <style>
         :root {
            --red-color: 15px;
         }
         h2 {
            color: red;
         }
         h2 {
            color: var(--red-color);
         }
      </style>
      </head>
      <body>
         <h2>Tutorialspoint CSS Variables.</h2>
      </body>
      </html>

      CSS Variables - Values in Javascript

      The following example demonstartes that how to use JavaScript to set CSS custom properties 
      <html>
      <head>
      <style>
         .box {
            width: 400px;
            height: 200px;
            text-align: center;
            line-height: 35px;
            margin: 10px;
            background-color: var(--pink-color);
            color: var(--blue-color);
         }
         .box1, .box2 {
            display: inline-block;
            border: 3px solid yellow;
            width: 100px;
            height: 50px;
            color: var(--blue-color);
         }
      </style>
      </head>
      <body>
         <div class="box">
            <h2>Tutorialspoint</h2>
            <p>How to code a website using HTML and CSS</p>
            <div class="box1">HTML</div>
            <div class="box2">CSS</div>
         </div>
      
         <script>
            const boxElement = document.querySelector('.box');
      
            const jsPinkColor = 'pink'; 
            const jsBlueColor = 'blue'; 
      
            boxElement.style.setProperty('--pink-color', jsPinkColor);
            boxElement.style.setProperty('--blue-color', jsBlueColor);
         </script>
      </body>
      </html>