- 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
![Krantik Chavan](https://www.tutorialspoint.com/assets/profiles/13545/profile/60_126883-1512724834.jpg)
260 Views
To change the pagination size, use the font-size property. You can try to run the following code to increase the size of pagination:ExampleLive Demo .demo { display: inline-block; } .demo a { color: red; padding: 5px 12px; text-decoration: none; transition: background-color 2s; border: 1px solid orange; font-size: 18px; } .demo a.active { background-color: orange; color: white; border-radius: 5px; } .demo a:hover:not(.active) { background-color: yellow; } .demo a:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .demo a:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } Our Quizzes
![Jennifer Nicholas](https://www.tutorialspoint.com/assets/profiles/13569/profile/60_88876-1512715262.jpg)
310 Views
You can try to run the following code to add space between pagination links with CSS:ExampleLive Demo .demo { display: inline-block; } .demo a { color: red; padding: 5px 12px; text-decoration: none; transition: background-color 2s; border: 1px solid orange; } .demo a.active { background-color: orange; color: white; border-radius: 5px; } .demo a:hover:not(.active) { background-color: yellow; } .demo a:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .demo a:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } Our Quizzes
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
99 Views
Set gap between Grid columns with CSS. You can try to run the following code to implement the grid-column-gap property.ExampleLive Demo .container { display: grid; background-color: green; grid-template-columns: auto auto; padding: 20px; grid-column-gap: 20px; } .ele { background-color: orange; 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)
382 Views
To add rounded borders, use the border-radius property. For top/ bottom left, use the border-top-left-radius property and for bottom, use border-bottom-left-radius. In the same way, set for top/bottom right.ExampleYou can try to run the following code to add rounded borders to first and last link in the pagination −Live Demo .demo { display: inline-block; } .demo a { color: red; padding: 5px 12px; ... Read More
![Yaswanth Varma](https://www.tutorialspoint.com/assets/profiles/511236/profile/60_1602256-1662106429.jpg)
178 Views
Pagination is used to separate the given document into pages and assigns numbers. It makes easier to navigate through a lot of content by separating various entries or web content into separate pages, which makes content switching easy. Pagination enabled web links let users to scroll over your content. One effective technique for indexing on the home page of different website pages is CSS pagination. You need to implement pagination for every page on your website if it has a lot of them. hoverable pagination is nothing, but it gets hover when the user moves the mouse over pagination. There ... Read More
![Anvi Jain](https://www.tutorialspoint.com/assets/profiles/13591/profile/60_98631-1512716973.jpg)
398 Views
To create a transition effect on hover pagination, use the transition property.ExampleYou can try to run the following code to add transition effect −Live Demo .demo { display: inline-block; } .demo a { color: red; padding: 5px 12px; text-decoration: none; border-radius: 5px; transition: background-color 2s; } .demo a.active { background-color: orange; color: white; border-radius: 5px; } .demo a:hover:not(.active) { background-color: yellow; } Our Quizzes
![Nishtha Thakur](https://www.tutorialspoint.com/assets/profiles/13598/profile/60_104893-1512719058.jpg)
83 Views
The grid-template-columns property is used to set the number of columns in the Grid.ExampleYou can try to run the following code to implement the grid-template-columns property −Live 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