CSS Articles - Page 89 of 160

To set the color of the text decoration, use the text-decoration-color property. To place this color overline, underline, line through, etc, use the text-decoration property. Let us see how to set the color of the text decoration Color the text decoration overline The text is decorated overline and then the color is set using the text-decoration-color property − .demo { text-decoration: overline; text-decoration-color: yellow; } Example Here is the example − .demo { ... Read More

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

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 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 top property with CSS, you can try to run the following code −ExampleLive Demo                    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!          

To implement animation on text-decoration property with CSS, you can try to run the following code −ExampleLive Demo                    #demo {             position: absolute;             right: 0;             width: 300px;             height: 200px;             background-color: blue;             text-decoration: underline;             animation: myanim 3s infinite;          }          @keyframes myanim {             30% {                right: 350px;                text-decoration-color: orange;             }          }                     CSS text-decoration-color property                This is demo text.