How to create a Calendar with CSS?

CSSWeb DevelopmentFront End Technology

To create a calendar with CSS, the code is as follows −


 Live Demo

<!DOCTYPE html>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   * {
      box-sizing: border-box;
   .calender {
      border: 1px solid darkorchid;
   .month {
      padding: 50px;
      width: 100%;
      background: #874de6;
      text-align: center;
      border: 1px solid rgba(139, 0, 139, 0.671);
   .month ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
   .month ul li {
      font-size: 30px;
      text-transform: uppercase;
      letter-spacing: 6px;
      color: yellow;
   .month .lastMonth {
      float: left;
      padding-top: 10px;
   .month .nextMonth {
      float: right;
      padding-top: 10px;
   .Days {
      margin: 0;
      padding: 10px 0;
      background-color: rgb(169, 210, 248);
      border: 1px solid rgba(0, 0, 139, 0.514);
   .Days li {
      font-weight: bold;
      display: inline-block;
      width: 13.6%;
      color: rgb(0, 0, 0);
      text-align: center;
   .daysNumber {
      padding: 10px 0;
      background: rgb(235, 255, 182);
      margin: 0;
      font-weight: bold;
   .daysNumber li {
      list-style-type: none;
      display: inline-block;
      width: 13.6%;
      text-align: center;
      margin-bottom: 5px;
      font-size: 12px;
      color: rgb(0, 0, 0);
   .daysNumber li .today {
      padding: 5px;
      background: #17003b;
      font-weight: bolder;
      border-radius: 50%;
      color: rgb(229, 255, 0) !important;
<h1 style="text-align: center;">CSS Calendar Example</h1>
<div class="calender">
<div class="month">
<li class="lastMonth">❮</li>
<li class="nextMonth">❯</li>
March<br />
<ul class="Days">
<ul class="daysNumber">
<li><span class="today">22</span></li>


The above code will produce the following output −

Updated on 07-May-2020 11:21:42