CSS Tutorial

This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.
Pagination
﻿
CSS pagination is a technique for creating page numbers for a website, which allows users to easily navigate between large amounts of content. It is a simple and effective way to organize your website and make it more user-friendly.
Step 1: Add HTML Markup
To create a pagination element in HTML, you can use a <div> or <ul> element. The element will contain links for each page of your content, and optionally "Previous" and "Next" links.
<div class="simple-pagination">
   <a href="#">«</a>
   <a href="#">A</a>
   <a href="#">B</a>
   <a href="#">C</a>
   <a href="#">D</a>
   <a href="#">E</a>
   <a href="#">»</a>
</div>
Step 2: Define CSS Classes
Specify the CSS styles for your pagination, including the display, padding, and list-styles.
.simple-pagination {
   display: flex;
   list-style: none;
   padding: 0;
}
Step 3: Pagination Link Styles
You can style the individual pagination links (the <a> elements) to control their appearance, such as their color, padding, and text decoration.
.simple-pagination a {
   text-decoration: none;
   padding: 12px;
   color: black;
}
CSS Simple Pagination
The following example demonstrates a simple pagination element that is displayed as a flexbox container 
<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 12px;
      color: black;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>       
CSS Active and Hoverable Pagination
You can create a pagination element with different styles by:
Add .active class to the current page number.
Use :hover selector to change the color of all page links when hovering over them.
Here is an example 
<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>
CSS Rounded Active and Hoverable Buttons
You can create a pagination element with a rounded active and hover button by adding the border-radius CSS property.
Here is an example 
<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      border-radius: 8px;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>
CSS Hoverable Transition Effect
You can create a pagination element with smooth transitions when hovering over the pagination links using the transition property.
Here is an example 
<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>
CSS Bordered Pagination
When you want to add a border to pagination links, you can use the CSS border property.
Here is an example 
<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>
CSS Rounded Borders
When you want to round the corners of pagination links, you can use the CSS border-radius property.
Here is an example 
<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:first-child {
      border-top-left-radius: 20px; 
      border-bottom-left-radius: 20px; 
   }
   .simple-pagination a:last-child {
      border-top-right-radius: 20px; 
      border-bottom-right-radius: 20px; 
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>
CSS Space Between Links
The following example demonstrates how to use the CSS margin property to create a space around each link in the pagination component 
<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
      margin: 2px;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>
The following example demonstrates how to use the CSS column-gap property to create a space around each link in the pagination component 
<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
      column-gap: 2px;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>
CSS Pagination Size
The following example demonstrates that the font-size property can be used to set the size of the text in a link.
<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      border: 2px solid blue;
      font-size: 20px;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>   
CSS Centered Pagination
When you want to center the links in the pagination component, you can use the justify-content CSS property.
Here is an example 
<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
      justify-content: center;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#">«</a>
      <a href="#" class="active-link">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
      <a href="#">D</a>
      <a href="#">E</a>
      <a href="#">»</a>
   </div>
</body>
</html>
CSS Pagination With Next Previous Buttons
The following example demonstrates a simple pagination component with previous and next buttons 
<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      list-style: none;
      padding: 0;
      margin: 10px;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      transition: background-color 0.4s;
      border: 2px solid blue;
   }
   .simple-pagination a.active-link {
      background-color: violet;
      color: white;
   }
   .simple-pagination a:hover:not(.active-link) {
      background-color: pink;
   }
</style>
</head>
<body>
   <div class="simple-pagination">
      <a href="#" class="active-link">Tutorialspoint</a>
      <a href="#">Home</a>
      <a href="#">Articles</a>
      <a href="#">Courses</a>
      <a href="#">Settings</a>
   </div>
   <div class="simple-pagination">
      <a href="#" class="prev-next">< Previous</a>
      <a href="#" class="prev-next">Next ></a>
   </div>
</body>
</html>
CSS Pagination With Breadcrumb
The following example demonstrates a simple pagination component with previous and next buttons 
<html>
<head>
<style>
   ul.breadcrumb-pagination {
      padding: 10px;
      list-style: none;
      background-color: pink;
   }
   ul.breadcrumb-pagination li {
      display: inline-block;
   }
   ul.breadcrumb-pagination li a {
      color: blue;
   }
   ul.breadcrumb-pagination li+li:before {
      padding: 10px;
      content: "/\00a0";
   }
</style>
</head>
<body>
   <ul class="breadcrumb-pagination">
      <li><a href="#">Tutorialspoint</a></li>
      <li><a href="#">CSS Pagination</a></li>
      <li class="active-link">CSS Pagnation With Breadcrumb</li>
   </ul>
</body>
</html>
CSS Pagination With List
You can also use unordered list (<ul>) and list items (<li>) for creating the pagination.
Here is an example 
<html>
<head>
<style>
   .simple-pagination {
      display: flex;
      padding: 0;
      list-style: none;
   }
   .simple-pagination li {
      margin: 5px;
   }
   .simple-pagination a {
      text-decoration: none;
      padding: 8px 12px;
      color: #333;
      border: 2px solid blue;
   }
   .simple-pagination a:hover {
      background-color: pink;
   }
   .simple-pagination .active-link {
      background-color: violet;
      color: white;
   }
</style>
</head>
<body>
   <ul class="simple-pagination">
      <li><a href="#">«</a></li>
      <li><a href="#" class="active-link">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">E</a></li>
      <li><a href="#">»</a></li>
   </ul>
</body>
</html>   
﻿
﻿
﻿
﻿
﻿
﻿
﻿
CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

CSS Tutorial

Pagination

Step 1: Add HTML Markup

Step 2: Define CSS Classes

Step 3: Pagination Link Styles

CSS Simple Pagination

CSS Active and Hoverable Pagination

CSS Rounded Active and Hoverable Buttons

CSS Hoverable Transition Effect

CSS Bordered Pagination

CSS Rounded Borders

CSS Space Between Links

CSS Pagination Size

CSS Centered Pagination

CSS Pagination With Next Previous Buttons

CSS Pagination With Breadcrumb

CSS Pagination With List
