December 16

posted Dec 16, 2011, 1:30 PM by Peter Knowles
Yesterday we created HTML code to represent a month in 2012; today we start styling that code with CSS. To do so, follow the steps below, in order, and you'll end up with a calendar to be proud of.

NOTE: Try to pay attention to what each new CSS element does to your calendar's display. If you don't like the results, try something else. Although there's a lot to do, it's worth taking your time as you go so you understand what all the changes you try actually do to your calendar.

First, there are 8 potential CSS elements in your HTML code, and you'll be styling all of them to some degree or other. Those classes are:
  1. body
  2. clmonth
  3. caption
  4. tr
  5. th
  6. td
  7. previous
  8. next
You'll also be adding events to the HTML code after you've done a little styling, so you'll need a CSS style for 
event too. 

In all the code below, the parts that you should not change are in red, the things you should change to fit your own tastes are in blue.

READY? THEN LET'S START:

*First, if you haven't already added opening HTML tags for your style, add them now: 
Put 
<style type=text/css>
at the top of the <head> and 
</style>
at the bottom of your <head>
Everything else you'll do for awhile will go between those two tags.

*Now, let's style the body: Copy and paste
body {

background-color: #ffffff;

color: #000000;

font-size: 90%;

}
between the style tags. Remember, you can/should change everything in blue to fit your tastes. 

*Great. Now we start digging into the table itself: Copy and paste the following: 

.clmonth {

border: 3 px solid #ffffff;

border-collapse: collapse;

width: 780px;

}
 
IMPORTANT: You might notice that this and many of the other elements to follow begin with a period (.). This is an option you can use instead of using "div." in your CSS code. It's quicker, and works the same. Just don't forget to copy/paste it. 

Notice also that the border-collapse: collapse; should not be modified. This is what keeps the table looking clean by removing double margins between each cell. (Take it out, if you don't believe me, and see what happens). But there are lots of other things you can change:
solid can become double, groove, inset, outset, ridge, dashed, dotted
Your width can change to a different px, a %, or simply auto

*Now it's time to work on the title of your calendar. (Not what it's called; that's in your HTML. Just how it looks)

clmonth.caption {
text-align: left;
font-family: bold 110% Verdana, Arial, sans-serif;
font-size: 1.2em;
background-color: #eaeaea;
color: #669933;
padding-bottom: 0.4em;
}

*Next let's play around with the headings of your columns, where the days of the week appear. Here's what you need:

.clmonth th {

border: 1px solid #AAAAAA;

border-bottom: none;

padding: 0.2em 0.6em 0.2em 0.6em;

background-color: #CCCCCC;

color: #3F3F3F;

font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;

width: 110px;

}

Be careful changing the width of each th element. You have 7 of them, so in the sample above the entire calendar must be at least 770px wide or they'll start to overlap into each other or the next row. Nobody wants that, so take a look at how you styled the width of your entire table above .clmonth to make sure there's enough space to handle your th width. 

*Ready for more? Good. Now we get to the meat of the table: the actual cells. Copy paste this code next. 

.clmonth td {

border: 1px solid #EAEAEA;

font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;

padding: 0.2em 0.6em 0.2em 0.6em;

vertical-align: top;

}

Whatever you put in this section of the code will dominate the visual aspect of your calendar, because most of your dates are regular td elements. Play around with it until you find what you like. 

* The next, nested elements deal with the dates before and after your assigned month. 
.clmonth td.previous, .clmonth td.next {

background-color: #F6F6F6;

color: #C6C6C6;

}

You can change aspects of this code, but probably want to keep the effect of these cells more subtle than the regular td elements. 

* The last of these td elements is for cells named "active". You don't have any yet, but you will (see below). For now, just copy and paste the code below. 

.clmonth td.event {

background-color: #B1CBE1;

color: #2B5070;

border: 2px solid #4682B4;

}

Change what details you want now, or come back and do it later when you can see its effects. 

*Next is what you'll use to show events within a certain date range. You'll be using lists, but again, without any events yet, you might want to just copy and paste it and play around with it later. 

.clmonth ul {

list-style-type: none;

margin: 0;

padding-left: 1em;

padding-right: 0.6em;

}

.clmonth li {

margin-bottom: 1em;

}

* Now we'll jazz the calendar up a bit with different colored rows, using the nth-child code below. 


tr:nth-child(2n) { background-color: #cccccc; } /* even numbered rows are gray */

tr:nth-child(2n+1) { background-color: #e7ecf1; } /* odd numbered rows are blue */


 * And then, to add a little action to the page, we'll make a hover pseudo-class that changes the color of the date we're on:

.clmonth td:hover {

background-color: #336699;

color: #ffffff;

border: 2px solid #336699;

}

And believe it or not, that's the end of the CSS code. 

Now we'll add a few events to see how it all works out. 

For each event you add, you'll need to change the existing td code that looks like this:

<td>7</td>

to something that looks like this:

<td class="event">7

      <ul>

        <li>The name of your event</li>

      </ul>
</td>


Notice that you're adding a particular event to a particular date, but you're adding it as a one-item unordered list, and your making the <td> into a <td class="event">. By doing this, you'll call three CSS styles into play:
.clmonth td.event
.clmonth ul
.clmonth li
After you've got a few events in your calendar, you might want to go back to your CSS code and play around with some design choices. 

So here are the events you need to add: 
Find a holiday in your month. Add at least ONE HOLIDAY to the proper date (for 2012). So if I was doing November, I might change 
<td>11</td>
to 
<td class="event">11

      <ul>

        <li>Veterans Day</li>

      </ul>
</td>

Does it work? Great. If not, ask for help.
If so, move on.....

In addition to ONE HOLIDAY, you also need to add 
ONE BIRTHDAY (maybe someone's in this class???)

And the Athletic Department has a meeting every third Monday of the month. Add that.

And the CHS Web All-stars have a party on the 16th of every month. Add that.

And add Mr. Knowles updates grades every 10 days. Add those dates, too. 

Whew! Are you ready for a break? I am, too. 

Make sure you share your code first. 

Comments