Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Use the grid-auto-rows property to set size for the rows.ExampleYou can try to run the following code to implement the grid-auto-rows property −Live Demo .container { display: grid; grid-auto-rows: 50px; grid-gap: 10px; background-color: red; padding: 10px; } .container>div { background-color: yellow; text-align: center; padding:10px 0; font-size: 20px; } 1 2 3 4 5 6
Use the flex-direction property with row-reverse value to set the flex-items horizontally from right to left.ExampleYou can try to run the following code to implement the row-reverse valueLive Demo .mycontainer { display: flex; flex-direction: row-reverse; background-color: orange; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4 Q5 Q6
Use the hanging-punctuation property to set whether a punctuation character may be placed outside the line box.It has the following valuesS.NoProperty Value & Description1.NoneNo punctuation mark2.FirstPunctuation outside the start edge of the first line3.LastPunctuation outside the end edge of the last lineSet it like this in your web page −hanging-punctuation: none; hanging-punctuation: first; hanging-punctuation: last;
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.
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
Given with n nodes the task is to print the nth node from the end of a linked list. The program must not change the order of nodes in a list instead it should only print the nth node from the last of a linked list.ExampleInput -: 10 20 30 40 50 60 N=3 Output -: 40In the above example, starting from first node the nodes till count-n nodes are traversed i.e 10, 20 30, 40, 50, 60 and so the third node from the last is 40.Instead of traversing the entire list this efficient approach can be followed ... Read More
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!
Set the following properties with the grid property: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow property.ExampleYou can try to run the following code to implement the CSS grid propertyLive Demo .container { display: grid; grid: 100px / auto auto; grid-gap: 10px; background-color: red; padding: 10px; } .container>div { background-color: yellow; text-align: center; padding:10px 0; font-size: 20px; } 1 2 3 4 5 6
Use the justify-content property with value center to align the flex-items to the center.ExampleYou can try to run the following code to implement the center value −Live Demo .mycontainer { display: flex; background-color: red; justify-content: center; } .mycontainer > div { background-color: orange; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4
To set the width of each column in Grid Layout, use the grid-template-columns property.ExampleYou can try to run the following code to implement it −Live Demo .container { display: grid; background-color: gray; grid-template-columns: 120px 80px 50px; padding: 20px; grid-gap: 20px; } .container > div { background-color: yellow; border: 2px solid gray; padding: 35px; font-size: 30px; text-align: center; } Game Board 1 2 3 4 5 6