- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 1566 Articles for CSS
![Samual Sam](https://www.tutorialspoint.com/assets/profiles/13514/profile/60_83486-1512649303.jpg)
107 Views
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
![Syed Javed](https://www.tutorialspoint.com/assets/profiles/13356/profile/60_64693-1512709676.jpg)
829 Views
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
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
595 Views
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
![Nishtha Thakur](https://www.tutorialspoint.com/assets/profiles/13598/profile/60_104893-1512719058.jpg)
437 Views
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%; }
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
89 Views
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
![Daniol Thomas](https://www.tutorialspoint.com/assets/profiles/13551/profile/60_130035-1512726078.jpg)
372 Views
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!
![Nancy Den](https://www.tutorialspoint.com/assets/profiles/13557/profile/60_88439-1512714529.jpg)
134 Views
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
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
414 Views
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.
![Nishtha Thakur](https://www.tutorialspoint.com/assets/profiles/13598/profile/60_104893-1512719058.jpg)
89 Views
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.
![Krantik Chavan](https://www.tutorialspoint.com/assets/profiles/13545/profile/60_126883-1512724834.jpg)
296 Views
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