To set names to grid items in CSS, use the grid-area property, with the grid-template-areas property:ExampleLive 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          

In website design, color is crucial. It can affect the links that users click on, the way they read information, and how comfortable they are surfing your website. While incorporating color it requires practice and adding it to your website is simple when you use the CSS color and background-color property. These properties can be defined in a number of ways. A web page's text or background color can be altered using HTML color names, hex color codes, RGB color codes, or HSL color values. In this aricle we are going to learn about the RGB colors. RGB(Red-Green-Blue) An HTML ... Read More

Set the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties using the grid-area property.ExampleYou can try to run the following code to implement the CSS grid-area property.LIve Demo                    .container {             display: grid;             background-color: green;             grid-template-columns: auto auto;             padding: 20px;             grid-gap: 10px;          }          .container > div {             background-color: orange;             text-align: center;             padding: 10px 0;             font-size: 20px;          }          .ele1 {             grid-area: 1 / 2 / 2 / 5;          }                     Game Board                1          2          3          4          5          6          

To implement animation on column-rule-width property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 600px;             height: 300px;             background: white;             border: 10px solid red;             animation: myanim 3s infinite;             bottom: 30px;             position: absolute;             column-rule: 10px inset orange; ... Read More

To implement animation on the column-rule property with CSS, you can try to run the following code:ExampleLive Demo                    div {             width: 600px;             height: 300px;             background: white;             border: 10px solid red;             animation: myanim 3s infinite;             bottom: 30px;             position: absolute;             column-count: 4;   ... Read More

Use the flex-direction property with row value to set the flex-items horizontally.ExampleYou can try to run the following code to implement the row value −Live Demo                    .mycontainer {             display: flex;             flex-direction: row;             background-color: #2C3E50;          }          .mycontainer > div {             background-color: #F7F9F9;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          Q5          Q6          

Use the border-top-left-radius property to set the border of the top left corner. You can try to run the following code to implement border-left-radius property:ExampleLive Demo                    #rcorner {             border-radius: 25px;             border-top-left-radius: 45px;             background: #FADBD8;             padding: 20px;             width: 300px;             height: 150px;          }                     Rounded top-left corner!    

Use the border-radius property to set all the four border-radius properties. You can try to run the following code to implement border-radius property:ExampleLive Demo                    #rcorner {             border-radius: 25px;             background: #85C1E9;             color: white;             padding: 20px;             width: 200px;             height: 250px;          }                     Rounded corners!    

To implement animation on the column-gap property with CSS, you can try to run the following code −ExampleLive Demo                    div {             width: 600px;             height: 300px;             background: white;             border: 10px solid red;             animation: myanim 3s infinite;             bottom: 30px;             position: absolute;             column-count: 4; ... Read More

Use the flex-wrap property with wrap-reverse value to wrap flex-items in reverse order.ExampleYou can try to run the following code to implement the wrap-reverse valueLive Demo                    .mycontainer {             display: flex;             background-color: #D35400;             flex-wrap: wrap-reverse;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Ans1          Ans2          Ans3          Ans4          Ans5          Ans6          Ans7          Ans8          Ans9