Use the font-kerning property to control how letters placed on a web page. You can try to run the following code to implement the font-kerning propertyExampleLive Demo                    #demo {             font-kerning: normal;          }                     This is demo text.    

Use the CSS rgb() function to define color using the RGB Model.Use the CSS rgba() function to set RGB colors with opacity.ExampleYou can try to run the following code to set the color with rgba() functionLive Demo                    h1 {             background-color:hsl(0,100%,50%);          }          h2 {             background-color:rgb(0,0,255);             color: rgb(255,255,255);          }          p {             background-color:rgba(255,0,0,0.9);          }                     Red Background       Blue Background       This is demo text!    

The attr() CSS function returns the value of an attribute of the selected element using CSSExampleYou can try to run the following code to implement the attr() function in CSSLive Demo                    a:before {content: " (" attr(href) ")";}                     Information Resource                Resource:Welcome to Qries          

The var() function in CSS is used to add custom property values to your web page. Set a custom name of the property and set value for it.ExampleYou can try to run the following code to implement var() functionLive Demo                    :root {             --my-bg-color: blue;             --my-color: white;          }          #demo {             background-color: var(--my-bg-color);             color: var(--my-color);          }                     Heading One                This is demo text. This is demo text. This is demo text.          This is demo text. This is demo text. This is demo text.          This is demo text. This is demo text. This is demo text.                

To implement animation on flex property with CSS, you can try to run the following codeExampleLive Demo                    .box {             display: flex;             background-color: orange;             align-content: space-between;             height: 150px;             width: 600px;             flex-wrap: wrap;          }          .box > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }          div {             animation: myanim 4s infinite;          }          @keyframes myanim {             50% {                flex: 1;             }          }                     Quiz                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          

To implement animation on the font-size property with CSS, you can try to run the following codeExampleLive Demo                    p {             border: 2px solid black;             width: 400px;             height: 100px;             animation: myanim 5s infinite;          }          @keyframes myanim {             70% {                font-size: 30px;             }          }                     This is demo text    

Use the grid-template-rows property to set the number of rows in a grid layoutExampleLive Demo                    .container {             display: grid;             background-color: green;             grid-template-rows: auto auto;             padding: 20px;             grid-gap: 20px;          }          .container > div {             background-color: orange;             border: 2px solid gray;             padding: 35px;             font-size: 30px;             text-align: center;          }          .ele1 {             grid-row-start: 1;             grid-row-end: 6;          }                     Game Board                1          2          3          4          5          6          

The attr() CSS function returns the value of an attribute of the selected element using CSSYou can try to run the following code to implement the attr() function in CSSExampleLive Demo                    a:before {content: " (" attr(href) ")";}                     Information Resource       Resource: Welcome to Qries    

To display columns and rows using named CSS, use the grid-area property, with the grid-template-areas propertyExampleLive Demo                    .container {             display: grid;             background-color: green;             grid-template-areas: 'demo demo . . .' 'demo demo . . .';             padding: 20px;             grid-gap: 10px;          }          .container > div {             background-color: orange;             text-align: center;             padding: 10px 0;             font-size: 20px;          }          .ele1 {             grid-area: demo;          }                     Game Board                1          2          3          4          5          6          

To implement animation on the bottom property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 200px;             height: 300px;             background: yellow;             border: 10px solid red;             animation: myanim 3s infinite;             bottom: 30px;             position: absolute;          }          @keyframes myanim {             20% {                bottom: 100px;             }          }                     Performing Animation for bottom property