- 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
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
106 Views
To select elements whose attribute value begins with a specified value, use the [attribute^=”value”] selectorYou can try to run the following code to implement the [attribute^=”value”] selector,ExampleLive Demo [alt^=Tutor] { border: 5px solid blue; border-radius: 5px; }
![Nancy Den](https://www.tutorialspoint.com/assets/profiles/13557/profile/60_88439-1512714529.jpg)
77 Views
To select all the elements with id=”tutorials”, you can try to run the following code.Use the #id CSS selector to achieve this,ExampleLive Demo #tutorials { border: 3px solid red; } Tutorialspoint Learning Tutorials on web dev, programming, database, networking, etc. Every tutorials has lessons with illustrations and figures.
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
651 Views
Use the animation-timing-function property, with the ease-out value to set animation with a slow end with CSSExampleLive Demo div { width: 150px; height: 200px; position: relative; background-color: #808000; animation-name: myanim; animation-duration: 2s; animation-direction: alternate-reverse; animation-iteration-count: 3; } @keyframes myanim { from {left: 100px;} to {left: 200px;} } #demo {animation-timing-function: ease-out;} ease-out effect
Selects all elements that are placed immediately after elements with CSS
Updated on 24-Jun-2020 06:26:54
274 Views
Use the element+element selector to select elements placed after first specified element. You can try to run the following code to implement this,ExampleLive Demo
div + p {
color: white;
background-color: blue;
}
Demo Website
Fruits
This is demo text.
Fruits are good for health.
Fruits makes you healthy.
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
274 Views
Use the element+element selector to select elements placed after first specified element. You can try to run the following code to implement this,ExampleLive Demo div + p { color: white; background-color: blue; } Demo Website Fruits This is demo text. Fruits are good for health. Fruits makes you healthy.
Selects all elements where the parent is a element with CSS
Updated on 24-Jun-2020 06:27:50
511 Views
Use the element > element selector to select an element with a parent element.You can try to run the following code to select all elements where the parent is a element,ExampleLive Demo
div > p {
color: white;
background-color: blue;
}
Demo Website
Fruits
Fruits are good for health.
This is demo text.
![Daniol Thomas](https://www.tutorialspoint.com/assets/profiles/13551/profile/60_130035-1512726078.jpg)
511 Views
Use the element > element selector to select an element with a parent element.You can try to run the following code to select all elements where the parent is a element,ExampleLive Demo div > p { color: white; background-color: blue; } Demo Website Fruits Fruits are good for health. This is demo text.
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
196 Views
Use the animation-timing-function property, with the linear value to set animation with the same speed from start to end with CSSExampleLive Demo div { width: 150px; height: 200px; position: relative; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: alternate-reverse; animation-iteration-count: 3; } @keyframes myanim { from {left: 100px;} to {left: 200px;} } #demo {animation-timing-function: linear;} linear effect
![Nancy Den](https://www.tutorialspoint.com/assets/profiles/13557/profile/60_88439-1512714529.jpg)
84 Views
Use the animation-direction property to set whether an animation should be played forwards, backward or in alternate cycles:ExampleLive Demo div { width: 150px; height: 200px; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: reverse; } @keyframes myanim { from { background-color: green; } to { background-color: blue; } }
![radhakrishna](https://www.tutorialspoint.com/assets/profiles/13544/profile/60_40618-1512640354.jpg)
110 Views
Use the animation-delay property to set a delay for the start of an animation with CSS:ExampleLive Demo div { width: 150px; height: 200px; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-delay: 2s; } @keyframes myanim { from { background-color: green; } to { background-color: blue; } }
![mkotla](https://www.tutorialspoint.com/assets/profiles/13540/profile/60_41073-1512640012.jpg)
4K+ Views
The input type button can be a submit button or reset button. With CSS, we can style any button on a web page.You can try to run the following code to style input type button:ExampleLive Demo input[type=button] { background-color: orange; border: none; text-decoration: none; color: white; padding: 20px 20px; margin: 20px 20px; cursor: pointer; } Fill the below form, Subject Student
![Krantik Chavan](https://www.tutorialspoint.com/assets/profiles/13545/profile/60_126883-1512724834.jpg)
103 Views
The shorthand property to set all the animation properties is animation. It sets the animation duration, animation name, etc.You can try to run the following code to work with animation shorthand property:ExampleLive Demo div { width: 150px; height: 200px; background-color: yellow; animation: myanim 2s } @keyframes myanim { from { background-color: green; } to { background-color: blue; } }