css not applying to page
Hello everyone,
I am new to html and css. I have been doing it for about 3 weeks. I am learning a lot but there's a lot I don't yet understand. I'm trying to make a calendar for January with the weekdays, weekends, and holidays each in separate colors.
Also, the number for the date should be in the upper right corner of the cell and the name of the holiday should appear in the center of the cell. With just html I got it perfect, exactly how I need. I have a book and I have been visiting w3schools. I just need a little help from someone who understands css. This is what I have so far:
<html>
<head>
<title>Calendar</title>
<style type="text/css"
p.holiday { text-align: center;
}
td { color: #ff0000;
background-color: 000ff;
}
td.holiday { color: #ff6600;
background-color: ff0ff;
}
td.weekend { color: 0ff00;
background-color: #ff00ff;
}
tr { height: 80px;
text-align: right;
vertical-align: top;
width: 150px;
}
</style>
</head>
<body>
<table align="center" border="1" cellspacing="1" cellpadding="1" summary="January">
<caption>January</caption>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<tr>
<td class="weekend"> </td>
<td> </td>
<td class="holiday">1<p class="holiday">New Year's Day</p></td>
<td>2</td>
<td>3</td>
<td>4</td>
<td class="weekend">5</td>
</tr>
<tr>
<td class="weekend">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td class="weekend">12</td>
</tr>
<tr>
<td class="weekend">13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td class="weekend">19</td>
</tr>
<tr>
<td class="weekend">20</td>
<td class="holiday">21<p class="holiday">Martin Luther King</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td class="weekend">26</td>
</tr>
<tr>
<td class="weekend">27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td> </td>
<td class="weekend"> </td>
</tr>
</table>
</body>
</html>
None of the formatting appears when I view the page. What am I doing wrong?
Thanks in advance for any help.
close tag in the beginning . to td ??? . to tr ??? <style type="text/css">
p.holiday { text-align: center; }
td. { color: #ff0000; background-color: 000ff; }
td.holiday { color: #ff6600; background-color: ff0ff; }
td.weekend { color: 0ff00; background-color: #ff00ff; }
tr. { height: 80px; text-align: right; vertical-align: top; width: 150px; }
</style>