Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS object-position

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Pagination

0/1

CSS Pagination Examples

10 minutes

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4

Text lesson

CSS Pagination Examples

Simple Pagination

If your website features numerous pages, you might want to consider implementing pagination on each page.

Example

.pagination {
display: inline-block;
}

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

Active and Hoverable Pagination

Use an .active class to indicate the current page and employ the :hover selector to adjust the color of each page link when hovering over them.

Example

.pagination a.active {
background-color: #4CAF50;
color: white;
}

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

Rounded Active and Hoverable Buttons

Incorporate the border-radius property to achieve rounded edges for both the “active” and “hover” button states.

Example

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

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

Hoverable Transition Effect

Include the transition property in the page links to generate a transition effect when hovering over them.

Example

.pagination a {
transition: background-color .3s;
}

Bordered Pagination

Apply the border property to introduce borders to the pagination design.

Example

.pagination a {
border: 1px solid #ddd; /* Gray */
}

Rounded Borders

Suggestion: Incorporate rounded borders for the first and last links in your pagination.

Example

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

Space Between Links

Suggestion: Utilize the margin property to avoid grouping the page links together.

Example

.pagination a {
margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
}

Pagination Size

Adjust the size of the pagination using the font-size property.

Example

.pagination a {
font-size: 22px;
}

Centered Pagination

To center the pagination, wrap a container element (such as a <div>) around it and apply text-align:center to the container.

Example

.center {
text-align: center;
}

More Examples

Example

Breadcrumbs

Another type of pagination is commonly referred to as “breadcrumbs.”

Example

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”;
}