Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Articles by Chandu yadav
Page 18 of 81
Usage of CSS grid-column-gap property
Set gap between Grid columns with CSS. You can try to run the following code to implement the grid-column-gap property.Example .container { display: grid; background-color: green; grid-template-columns: auto auto; padding: 20px; grid-column-gap: 20px; } .ele { background-color: orange; border: 2px solid gray; padding: 35px; font-size: 30px; text-align: center; } Game Board 1 2 3 4 5 6
Read MoreRole of CSS: first-child Selector
Use the CSS :first-child selector to style every elements that is the first child of its parent.ExampleYou can try to run the following code to implement the :first-child selector p:first-child { background-color: orange; } Heading This is demo text. This is demo text, with the first child of its parent div. This is demo text, but not the first child.
Read MoreHow to specify the number of columns an element should be divided into with CSS
To specify the number of columns an element should be divided into, use the column-count property.You can try to run the following code to implement the column-count property with 4 columnsExample .demo { column-count: 4; } This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo ...
Read MoreCreate a Vertical Button Group with CSS
You can try to run the following code to create a vertical button groupExample .mybtn .button { background-color: orange; border: 1px solid green; width: 120px; color: white; font-size: 14px; padding: 10px; text-align: center; text-decoration: none; display: block; } Result Result Result Result
Read MoreRole of CSS:lang Selector
Use the CSS :lang selector to style every element with a lang attribute value with CSS. You can try to run the following code to implement the :lang selectorExample p:lang(fr) { background: greeb; } This is my country C'est mon pays French is the language of France
Read MoreCSS background-origin property
The CSS background-origin property is used to specify position of the background images.ExampleYou can try to run the following code to implement background-origin property: #demo { border: 5px dashed red; padding: 10px; background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg"); background-origin: content-box; } www.tutorialspoint.com The website www.tutorialspoint.com is ...
Read MoreRole of CSS :not (selector) Selector
Use the CSS :not(selector) selector to style every element that is not the specified element. You can try to run the following code to implement the :not selectorExample p { color: red; } :not(p) { color: blue; } Heading 1 Heading 2 Heading 3 This is a paragraph. This is another paragraph.
Read MoreVariables in CSS
Variables in CSS are used to add custom property values to your web page. Set a custom name of the property and set value for it.You can try to run the following code to implement variables in CSS to change the background and text colorExample :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.
Read MoreRole of CSS :nth-of-type(n) Selector
Use the CSS :nth-of-type(n) selector to style every element that is the nth element of its parent. You can try to run the following code to implement the :nth-of-type(n) selectorExample p:nth-of-type(2) { background: yellow; } This is demo text 1. This is demo text 2. This is demo text 3. This is demo text 4.
Read MorePerform Animation on CSS min-width
To implement animation on min-width property with CSS, you can try to run the following codeExample div { overflow: auto; width: 50%; background-color: blue; color: white; border: 1px solid black; animation: myanim 3s infinite; } @keyframes myanim { 30% ...
Read More