- 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
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
2K+ Views
To change the background color of a button, use the background-color property.You can try to run the following code to change button’s background colorExampleLive Demo .btn { background-color: yellow; color: black; text-align: center; font-size: 13px; } Result Click below for result: Result
![Anvi Jain](https://www.tutorialspoint.com/assets/profiles/13591/profile/60_98631-1512716973.jpg)
104 Views
Grid Container in CSS has grid items. These items are placed inside rows and columns. Let us create aCSS Grid container and set the number of columns in a Grid:ExampleLive Demo .container { display: grid; background-color: blue; grid-template-columns: auto auto; padding: 20px; grid-gap: 20px; } .container > div { background-color: orange; border: 2px solid gray; padding: 35px; font-size: 30px; text-align: center; } Game Board 1 2 3 4 5 6
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
81 Views
The object-fit property in CSS is used to resize image or video to fit its container. It has the following valuescontain: Content is scaled to fitcover: clipped to fitfill: fills the content box.ExampleYou can try to run the following code to implement object-fit property with the cover value.Live Demo .myimg { width:250px; height:350px; object-fit:fill; } SWIFT
![Yaswanth Varma](https://www.tutorialspoint.com/assets/profiles/511236/profile/60_1602256-1662106429.jpg)
139 Views
The purpose of adding images to websites is to increase their visual appeal and user appeal. But if we didn't have control over the size of the images on websites, they wouldn't be nearly as attractive. Fortunately, CSS makes it quite simple to alter the image size. The CSS image size can be altered using a variety of methods. First, let's examine the reasons why altering the size of an image in CSS matters. The image would fill every pixel of its size if there were no limits on its size. However, every image should fit inside the container that ... Read More
![Rishi Rathor](https://www.tutorialspoint.com/assets/profiles/13563/profile/60_89283-1512714754.jpg)
901 Views
Use the grid-template-columns property to define the number of columns in CSS Grid Layout.You can try to run the following code to set a number of columns. Here, 3 column grid is set:ExampleLive Demo .container { display: grid; background-color: yellow; grid-template-columns: auto auto auto; padding: 20px; grid-gap: 20px; } .container > div { background-color: blue; border: 2px solid gray; padding: 35px; font-size: 30px; text-align: center; } Game Board 1 2 3 4 5 6
![Nancy Den](https://www.tutorialspoint.com/assets/profiles/13557/profile/60_88439-1512714529.jpg)
993 Views
To position text to top right, use the right and top property. You can try to run the following code to implement it:ExampleLive Demo .box { position: relative; } img { width: 100%; height: auto; opacity: 0.6; } .direction { position: absolute; top: 10px; right: 19px; font-size: 13px; } Heading One Below image has text in the top right: Top Right Corner
![Daniol Thomas](https://www.tutorialspoint.com/assets/profiles/13551/profile/60_130035-1512726078.jpg)
2K+ Views
To add rounded corners to a button, use the border-radius property.ExampleYou can try to run the following code to add rounded corners −Live Demo .button { background-color: yellow; color: black; text-align: center; font-size: 15px; padding: 20px; border-radius: 15px; } Result Click below for result: Result
![Krantik Chavan](https://www.tutorialspoint.com/assets/profiles/13545/profile/60_126883-1512724834.jpg)
880 Views
Use the bottom CSS property to add arrow to the top of the tooltip.ExampleYou can try to run the following code to add a tooltip with arrow to the top:Live Demo .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; top: 150%; left: 50%; margin-left: -60px; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; } .mytooltip .mytext:after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -10px; border-width: 3px; border-style: solid; border-color: transparent transparent blue transparent; } .mytooltip:hover .mytext { visibility: visible; } Keep mouse cursor over me My Tooltip text