YouTip):
### CSS Example
div.center {
text-align: center;
}
[Try it »](#)
* * *
## More Examples
* * *
## Breadcrumb Navigation
* Home
* Frontend
* HTML Tutorial
* HTML Paragraphs
Another type of navigation is breadcrumb navigation, as shown in the example below:
### CSS 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: "/0a0";
}
[Try it »](#)
Css3 Pagination
In this chapter, we will introduce how to create pagination examples using CSS.
* * *
## Simple Pagination
If your website has many pages, you need to use pagination to navigate between each page.
The following example demonstrates how to create pagination using HTML and CSS:
### CSS Example
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
[Try it »](#)
* * *
## Click and Hover Pagination Styles
If you click the current page, you can use `.active` to style the current page. For mouse hover, you can use the `:hover` selector to modify the style:
### CSS Example
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
[Try it »](#)
### CSS Example
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
[Try it »](#)
### Rounded Style
You can use the `border-radius` property to add a rounded style to the selected page number:
### CSS Example
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
[Try it »](#)
### Hover Transition Effect
We can add a transition effect when the mouse moves over a page number by adding the `transition` property:
### CSS Example
ul.pagination li a {
transition: background-color .3s;
}
[Try it »](#)
* * *
## Bordered Pagination
We can use the `border` property to add bordered pagination:
### CSS Example
ul.pagination li a {
border: 1px solid #ddd; /* Gray */
}
[Try it »](#)
### Rounded Borders
**Tip:** Add rounded corners to the first and last pagination links:
### CSS Example
.pagination li:first-child a {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
[Try it »](#)
### Pagination Spacing
**Tip:** You can use the `margin` property to add space between each page number:
### CSS Example
ul.pagination li a {
margin: 0 4px; /* 0 corresponds to top and bottom, you can modify it to see the effect */
}
[Try it »](#)
* * *
## Pagination Font Size
We can use the `font-size` property to set the font size of the pagination:
### CSS Example
ul.pagination li a {
font-size: 22px;
}
[Try it »](#)
* * *
## Center Pagination
To center the pagination, you can add the **text-align:center** style to the container element (like