Pseudo class is to show different state of an element or a css selector. visited pseudo class is to show that the link is already visited.This pseudo class is mostly being associated with link.Syntaxa:visited { color:green;}Let's check the actual usage of :visited pseudo class with different scenarios, as follows -Example Live Demo           a:visited { color:green;}        Click here to learn ExplanationWhen you first time see the link it will be shown with normal link color (Blue) and the link will turn green if this link has been visited once.Example Live Demo ... Read More

Pseudo class is to show different state of an element or a css selector. Active pseudo class is to show that the element is in active state.This pseudo class is mostly being associated with link and button or any other element which can be active.For example if it is associated with link that the link is active.Syntaxa:active { color:green;}Let's check the actual usage of :active pseudo class with different scenarios, as follows −Example Live Demo           a:active { color:green;}        Click here to learn ExplanationWhen you first time see the link ... Read More

To implement animation on z-index property with CSS, you can try to run the following code −ExampleLive Demo                    div {             position: absolute;          }          #box div {             background-color: orange;             border: 2px solid yellow;             width: 100px;             height: 100px;             opacity: 0.3;          }          div#demo {             opacity: 1;             background-color: coral;             z-index: 1;             animation: myanim 3s;          }          @keyframes myanim {             30% {                z-index: 3;             }          }                     CSS z-index property                          One          Two          Three          Four          Five          Six          Seven          

The px unit defines a measurement in screen pixels. The following is an example −div {    padding: 40px; }The em unit is a relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each "em" unit would be 12pt; thus, 2em would be 24pt.The following is an example −p {    letter-spacing: 4em; }The % unit defines a measurement as a percentage relative to another value, typically an enclosing element.p {    font-size: 14pt;    line-height: 80%; }

To implement animation on the word-spacing property with CSS, you can try to run the following code −ExampleLive Demo                    div {             border: 2px solid blue;             background: orange;             animation: myanim 3s infinite;          }          @keyframes myanim {             50% {                word-spacing: 30px;             }         ... Read More

To implement animation on width property with CSS, you can try to run the following code −ExampleLive Demo                    div {             width: 300px;             height: 250px;             background-color: maroon;             color: white;             animation: myanim 3s;          }          @keyframes myanim {             30% {                width: 500px;             }          }                     CSS width property                This is demo text!          

To implement animation on transform property with CSS, you can try to run the following code −ExampleLive Demo                    div {             margin: auto;             border: 2px solid blue;             width: 300px;             height: 400px;             background-color: orange;             animation: myanim 3s;          }          @keyframes myanim {             30% {                transform: rotate(120deg);             }          }                                    Demo          

To implement animation on vertical-align property with CSS, you can try to run the following code −ExampleLive Demo                    img {             vertical-align: 80px;             animation: myanim 3s;          }          @keyframes myanim {             50% {                vertical-align:120px;             }          }                     CSS vertical-align property                        This is demo text. This is demo text. This is demo text. This is demo text.          

The CSS rest-after property is useful for speech media to set pause after an element.The following is the syntax −rest-after: | none | x-weak | weak | medium | strong | x-strongHere, x-weak | weak | medium | strong | x-strong is the rest by the strength of pauseLet us see an example of rest-after speech media property −h1 {    rest-after: 15ms; }The time sets the pause in milliseconds.

To implement animation on outline-offset property with CSS, you can try to run the following code −ExampleLive Demo                    div {             width: 350px;             height: 150px;             outline: 2px solid blue;             animation: myanim 3s infinite;          }          @keyframes myanim {             50% {               outline-offset: 50px;             }          }                     CSS outline-offset property