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
Role 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 MoreCSS shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
Use the flex property to add flex-grow, flex-shrink and flex-basis properties in a single line.You can try to run the following code to implement the flex propertyExample .mycontainer { display: flex; 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 Q7 Q8 Q9
Read MoreAnimate CSS padding-left property
To implement animation on padding-left property with CSS, you can try to run the following codeExample div { width: 350px; height: 150px; outline: 3px solid orange; animation: myanim 3s infinite; } @keyframes myanim { 50% { padding-left: 20px; } } CSS padding-left property
Read MoreRole of CSS: valid Selector
Use the CSS : valid selector to style all elements with a valid value .ExampleYou can try to run the following code to implement the :valid Selector input:valid { background: red; color: white; } Heading The style (red color background) appears if you type a relevant/ valid email address.
Read MoreCSS top property with Animation
To implement animation on top property with CSS, you can try to run the following code −Example div { position: absolute; width: 300px; height: 200px; background-color: orange; color: white; top: 0; animation: myanim 3s infinite; } @keyframes myanim { 30% { top: 300px; } } CSS top property This is demo text!
Read More