CSS Pagination

CSS pagination is an important part of web design and development. It allows users to easily navigate through a website or application with the use of a series of page numbers. Pagination allows for a website to be broken up into multiple pages, which can make it easier for readers to find what they are looking for.

CSS pagination can be implemented in a number of ways. The most basic form of pagination is to simply split the content into multiple pages using the HTML <div> tag. Each page can be numbered using HTML attributes such as data-page. This type of pagination can be enhanced further by adding a navigation menu, allowing users to easily jump between pages.

Simple Pagination: If you have a website with lots of pages, you may wish to add some sort of pagination to each page.

.pagination {  display: inline-block;}.pagination a {  color: black;  float: left;  padding: 8px 16px;  text-decoration: none;}

Highlight the current page with an a .active class, and use the :hover selector to change the color of each page link when moving the mouse over them:

.pagination a.active {  background-color: #4caf50;  color: white;}
.pagination a:hover:not(.active) {  background-color: #ddd;}

Rounded Active and Hover-able Buttons: Add the border-radius property if you want a rounded "active" and "hover" button:

.pagination a {  border-radius: 5px;}
.pagination a.active {  border-radius: 5px;}

Hover-able Transition Effect

Add the transition property to the page links to create a transition effect on hover:

.pagination a {  transition: background-color 0.3s;}BreadcrumbsAnother variation of pagination is so-called "breadcrumbs":CSS Code:ul.breadcrumb {  padding: 8px 16px;  list-style: none;  background-color: #eee;}
ul.breadcrumb li {  display: inline;}
ul.breadcrumb li + li:before {  padding: 8px;  color: black;  content: '/\00a0';}

CSS Box Sizing: The CSS box-sizing property allows us to include the padding and border in an element's total width and height. Without the CSS box-sizing Property By default, the width and height of an element is calculated like this: width + padding + border = actual width of an element height + padding + border = actual height of an element

This means: When you set the width/height of an element, the element often appears bigger than you have set (because the element's border and padding are added to the element's specified width/height). With the CSS box-sizing property The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height:

.div1 {  width: 300px;  height: 100px;  border: 1px solid blue;  box-sizing: border-box;}.div2 {  width: 300px;  height: 100px;  padding: 50px;  border: 1px solid red;  box-sizing: border-box;}

Since the result of using the box-sizing: border-box; is so much better, many developers want all elements on their pages to work this way.

The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%;. Applying this to all elements is safe and wise.

* {  box-sizing: border-box;}