- 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
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
185 Views
To center an image, use the margin-left, margin-right and block CSS properties. You can try to run the following code to center an imageExampleLive Demo img { border: 2px solid orange; border-radius: 3px; padding: 7px; } img { display: block; margin-left: auto; margin-right: auto; width: 50%; }
![Yaswanth Varma](https://www.tutorialspoint.com/assets/profiles/511236/profile/60_1602256-1662106429.jpg)
654 Views
Whether in graphic design, photography, or even on a web page, adding shadows is a massive technique to create the appearance of depth and perspective. It is not necessary to open Photoshop or another visual editing program in order to apply this kind of effect to text, images, and other elements on a web page it can be done by using the CSS3 properties. You can make use of two properties. The majority of browsers support both of these features, they are listed below − text-shadow box-shadow Add the comma-separated list of shadows to add more than one ... Read More
![Anvi Jain](https://www.tutorialspoint.com/assets/profiles/13591/profile/60_98631-1512716973.jpg)
676 Views
Use Inline List Items to build a horizontal navigation bar. Set the elements as inline.ExampleYou can try to run the following code to create horizontal navigation bar:Live Demo ul { list-style-type: none; margin: 0; padding: 0; } .active { background-color: #4CAF50; color: white; } li { border-bottom: 1px solid #555; display: inline; } Home Company Product Services Contact
![Smita Kapse](https://www.tutorialspoint.com/assets/profiles/13597/profile/60_103706-1512718957.jpg)
925 Views
Use the text-shadow property to create white text with black shadow.You can try to run the following code to implement the text-shadow property:ExampleLive Demo h1 { color: white; text-shadow: 3px 3px 3px #000000; } Heading One Above heading has a text shadow effect.
![Nitya Raut](https://www.tutorialspoint.com/assets/profiles/13573/profile/60_92249-1512715559.jpg)
309 Views
To fade in tooltip text with CSS, you can try to run the following code:ExampleLive Demo .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; top: -5px; right: 110%; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; opacity: 0; transition: opacity 1s; } .mytooltip { position: relative; display: inline-block; margin-left: 150px; } .mytooltip .mytext:after { content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 6px; border-style: solid; border-color: transparent transparent transparent blue; } .mytooltip:hover .mytext { visibility: visible; opacity: 1; } Keep mouse cursor over me My Tooltip text
![Jennifer Nicholas](https://www.tutorialspoint.com/assets/profiles/13569/profile/60_88876-1512715262.jpg)
169 Views
To increment a counter value with CSS, use the counter-increment property.You can try to run the following code to implement the counter-implement property −ExampleLive Demo body { counter-reset: section; } h2::before { counter-increment: section; content: "Fruit " counter(section) " - "; } Fruits Mango Kiwi
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
182 Views
Apply a 2D or 3D transformation to an element with the transform property in CSS. You can try to run the following code to rotate an element using transformationExampleLive Demo div { width: 200px; height: 100px; background-color: gray; transform: rotate(10deg); } Rotation Demo