- 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
![Vrundesha Joshi](https://www.tutorialspoint.com/assets/profiles/13566/profile/60_88163-1512715024.jpg)
97 Views
The transform property in CSS is used to apply a 2D or 3D transformation to an element. You can try to run the following code to implement the transform property −ExampleLive Demo div { width: 200px; height: 100px; background-color: gray; transform: rotate(10deg); } Rotation Demo
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
2K+ Views
Use the element ~ element selector to select elements preceded by element. You can try to run the following code to implement thisExampleLive Demo p~ul { color: white; background-color: blue; } Demo Website Fruits Vegetables are good for health. Spinach Onion Capsicum Fruits are good for health. Apple Orange Kiwi
Selects all elements inside elements with CSS
Updated on 24-Jun-2020 07:08:44
3K+ Views
Use the element element selector to select all elements inside another element.You can try to run the following code to implement element element selector,ExampleLive Demo
div p {
color: white;
background-color: blue;
}
Demo Website
Fruits
Fruits are good for health.
This is demo text.
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
3K+ Views
Use the element element selector to select all elements inside another element.You can try to run the following code to implement element element selector,ExampleLive Demo div p { color: white; background-color: blue; } Demo Website Fruits Fruits are good for health. This is demo text.
Selects all elements and all elements with CSS
Updated on 24-Jun-2020 07:04:40
187 Views
To style, more than one element, use a comma. Separate each element with the comma to achieve this. You can try to run the following code to select and elements,ExampleLive Demo
div, p {
color: blue;
background-color: orange;
}
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)
187 Views
To style, more than one element, use a comma. Separate each element with the comma to achieve this. You can try to run the following code to select and elements,ExampleLive Demo div, p { color: blue; background-color: orange; } Demo Website Fruits Fruits are good for health. This is demo text.
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
858 Views
Use the right CSS property to add arrow to the right of the tooltip.You can try to run the following code to add a tooltip with arrow to the leftExampleLive Demo .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; top: -5px; left: 110%; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; margin-left: 50px; } .mytooltip .mytext:after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 6px; border-style: solid; border-color: transparent blue transparent transparent; } .mytooltip:hover .mytext { visibility: visible; } Keep mouse cursor over me My Tooltip text
![Nancy Den](https://www.tutorialspoint.com/assets/profiles/13557/profile/60_88439-1512714529.jpg)
931 Views
To select elements with an attribute, use the CSS [attribute] selector.For example, alt attribute or a target attribute, etc.You can try to run the following code to implement the CSS[attribute] selector,ExampleLive Demo img[alt] { border: 3px solid orange; }
![Yaswanth Varma](https://www.tutorialspoint.com/assets/profiles/511236/profile/60_1602256-1662106429.jpg)
2K+ Views
Using CSS, we can build a visually attractive HTML document. Sometimes, when creating a web page, we want certain images or elements to have rounded corners. The CSS border-radius property is used in this situation. It can be used to draw attention to your website and make it stand out to visitors. CSS border-radius property An element's outer border edges can be rounded at the corners using the CSS border-radius property. There can be one, two, three, or four values in this property. The border-radius can be set using the border-radius property. When border-collapse is collapsing, this property does not ... Read More
![Daniol Thomas](https://www.tutorialspoint.com/assets/profiles/13551/profile/60_130035-1512726078.jpg)
180 Views
Use the [attribute ~= "value"] selector to select elements with an attribute value containing a specified word with CSS.You can try to run the following code to implement the [attribute ~= "value"] selector. Here, the word we are searching is “Tutorials”,ExampleLive Demo [alt ~= Tutorials] { border: 5px solid orange; border-radius: 5px; }
![Krantik Chavan](https://www.tutorialspoint.com/assets/profiles/13545/profile/60_126883-1512724834.jpg)
114 Views
Use the animation-direction property to set whether an animation should be played forwards, backward or in alternate cycles.You can try to run the following code to implement the animation-direction property: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; } }
![Nishtha Thakur](https://www.tutorialspoint.com/assets/profiles/13598/profile/60_104893-1512719058.jpg)
195 Views
To set-top tooltip, use the bottom CSS property.You can try to run the following code to set-top tooltip to a text:ExampleLive Demo .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; bottom: 100%; left: 60%; margin-left: -90px; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; margin-top: 50px; } .mytooltip:hover .mytext { visibility: visible; } Keep mouse cursor over me My Tooltip text