- 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
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
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
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
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
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
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
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