How To Create A Smooth HTML Calendar Styled With CSS

This is a smooth HTML calendar styled with CSS that uses a simple hover effect upon mouseover. In this tutorial I will show you how to create your very own calendar! Let's jump right into it and start with interacting with the demo below. You'll notice as you hover your mouse over the different rows, it highlights that row with a black background and lime green text.

The Demo:

December
Su	Mo	Tu	We	Th	Fr	Sa
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31
© Your Website Here

With this tutorial instead of walking you through each step of the process I have decided to simplify everything. Below I have the complete HTML and CSS which you can copy and paste into your code editor. You'll also find that after each line of CSS code I have placed /*comments*/ to let you know what each piece of code does. If you need an editor to use, I recommend using JSBin.com, downloading Coda (for Mac) or Notepad.

Let me know your thoughts on this calendar in the comment section below!

HTML:

<table align="center" id="fancytable1">

<tr>
<th colspan="7">December</th>
</tr>

<tr class=alt1>
<td>Su</td>
<td>Mo</td>
<td>Tu</td>
<td>We</td>
<td>Th</td>
<td>Fr</td>
<td>Sa</td>
</tr>

<tr>
<td height="35">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>

<tr>
<td height="35">8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>

<tr>
<td height="35">15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>

<tr>
<td height="35">22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>

<tr>
<td height="35">29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr class=alt2>
<td colspan="7"><center><a href="Your Website Here" rel="tag">© Your Website Here</a></center></td>
</tr>

</table>

CSS:

<style>

a:link {color:#000000;} /*unvisited link*/
a:visited {color:#000000;} /*visited link*/
a:hover {color:#81d50d;} /*mouse over link*/
a:active {color:#81d50d;} /*selected link*/

#fancytable1 { /*Main table layout for calendar*/

border-top-left-radius:15px 15px; /*Top left rounded corner of calendar*/
-moz-border-radius-topleft:15px 15px; /*Top left rounded corner of calendar*/
border-radius-topleft:15px 15px; /*Top left rounded corner of calendar*/
border-top-right-radius:15px 15px; /*Top right rounded corner of calendar*/
-moz-border-radius-topright:15px 15px; /*Top right rounded corner of calendar*/
border-radius-topright:15px 15px; /*Top right rounded corner of calendar*/

font-family: Arial, Helvetica, sans-serif; /*Font style for calendar*/
color: #222222; /*Days of week text color*/
border-collapse:collapse; /*Removes border padding between calendar days*/
width:500px; /*Calendar Width*/

}

#fancytable1 th { /*Main calendar month title*/

padding:5px; /*Month title padding*/
border-top-left-radius:15px 15px; /*Rounded top left corner*/
-moz-border-radius-topleft:15px 15px; /*Rounded top left corner*/
border-radius-topleft:15px 15px; /*Rounded top left corner*/
border-top-right-radius:15px 15px; /*Rounded top right corner*/
-moz-border-radius-topright:15px 15px; /*Rounded top right corner*/
border-radius-topright:15px 15px; /*Rounded top right corner*/

font-size: 1.3em; /*Month title font size*/
text-align: center; /*Centers month title*/

background: -moz-linear-gradient(bottom, #666666, #222222); /*Background gradient of Month title*/
background: -webkit-linear-gradient(top, #666666, #222222); /*Background gradient of Month title*/
background: -o-linear-gradient(top, #666666,#222222); /*Background gradient of Month title*/
background: linear-gradient(top, #666666, #222222); /*Background gradient of Month title*/

color: #81d50d; /*Month title color*/
text-shadow: 2px 2px 2px #222222; /*Month title text shadow*/

}

#fancytable1 tr.alt1 td { /*Days of week Sunday through Saturday*/

padding:5px; /*Days of week cell padding*/

font-size: 1.5em; /*Days of week font size*/
text-align: center; /*Days of week text alignment*/

background: -moz-linear-gradient(bottom, #666666, #222222); /*Background gradient for Days of week*/
background: -webkit-linear-gradient(top, #666666, #222222); /*Background gradient for Days of week*/
background: -o-linear-gradient(top, #666666,#222222); /*Background gradient for Days of week*/
background: linear-gradient(top, #666666, #222222); /*Background gradient for Days of week*/

color: #81d50d; /*Days of week text color*/
text-shadow: 2px 2px 2px #222222; /*Days of week text shadow*/

}

#fancytable1 tr.alt2 td { /*Bottom bar with url*/

padding:5px; /*Bottom bar with url cell padding*/

border-bottom-left-radius:15px 15px; /*Bottom bar with url left rounded corner*/
-moz-border-radius-bottomleft:15px 15px; /*Bottom bar with url left rounded corner*/
border-radius-bottomleft:15px 15px; /*Bottom bar with url left rounded corner*/
border-bottom-right-radius:15px 15px; /*Bottom bar with url right rounded corner*/
-moz-border-radius-bottomright:15px 15px; /*Bottom bar with url right rounded corner*/
border-radius-bottomright:15px 15px; /*Bottom bar with url right rounded corner*/

font-size: .75em; /*Bottom bar with url font size*/
text-align: center; /*Bottom bar with url text alignment*/

background: -moz-linear-gradient(bottom, #666666, #222222); /*Background gradient bottom bar with url*/
background: -webkit-linear-gradient(top, #666666, #222222); /*Background gradient bottom bar with url*/
background: -o-linear-gradient(top, #666666,#222222); /*Background gradient bottom bar with url*/
background: linear-gradient(top, #666666, #222222); /*Background gradient bottom bar with url*/

color: #81d50d; /*Bottom bar with url text color*/
text-shadow: 2px 2px 2px #222222; /*Bottom bar with url text shadow*/

}

#fancytable1 td { /*Day numbers 1 through 31*/

padding:5px; /*Day numbers cell padding*/
background-color:#f0f0f0; /*Day numbers background color*/
font-size: 1em; /*Day numbers font size*/
text-align: center; /*Day numbers text alignment*/

}

#fancytable1 tr.alt td { /*Calendar day numbers area*/

background-color: cccccc; /*Calendar day numbers area background color*/

}

#fancytable1 tr:hover td { /*Hover row bar over day numbers 1 through 31*/

background: -moz-linear-gradient(bottom, #666666, #222222) !important; /*Hover row bar background color*/
background: -webkit-linear-gradient(top, #666666, #222222); /*Hover row bar background color*/
background: -o-linear-gradient(top, #666666,#222222); /*Hover row bar background color*/
background: linear-gradient(top, #666666, #222222); /*Hover row bar background color*/
color:#81d50d; /*Hover row bar text color*/
text-shadow: 2px 2px 2px #222222; /*Hover row bar text shadow*/

}

</style>