January 3

posted Jan 3, 2012, 7:04 AM by Peter Knowles   [ updated Jan 4, 2012, 1:14 PM ]
Welcome back!
It's 2012 now, and you might remember that before vacation, you created an HTML page for a particular month of this year. 
You then styled it with CSS. 
Remember? 
Good.

Find the code that you created and take a look at it. 
Your font styles, sizes, attributes, colors, margins, and all sorts of aesthetic/design decisions you made before vacation should look familiar. 
And they should look different from everyone else's. Go ahead and take a look at a few others around you. You'll see that every one is different. That's how it was supposed to be for this assignment. 

But that's not how calendars usually work. Usually, when a person moves from one month to the next, it makes sense if all the months look the same. The events and dates and all should be different, but the basic format should be the same. 

If we wanted to make all our individual months look the same, it would mean doing a lot of work in all our files to create identical CSS style attribute tags in each individual file. 

Or.... 

We could change from an INTERNAL style sheet (where each file contains the CSS style for the code there) to and EXTERNAL style sheet (where each file uses CSS code from a central location)

That's what we're going to do today. 
As a class, we'll design a style that we can all love (or at least can all live with). 

Start by making a copy of your calendar's code. Name it "YOURMONTH2012EXT" (for example JUNE2012EXT) Keep your old code as it is; all work we do today will be done in the new file.

Then, we'll work our way through the CSS choices we made when we were working on our own to find the best versions of each element, sharing our successful approaches as we go. Make the changes we discuss to see how they work in YOUR calendar.

By the end of the class period, we'll have the CSS code we need, following the best ideas of the class. 

Then, with a single code change, we'll all make reference to it using an EXTERNAL STYLE SHEET

And then, as if by magic, all our calendars will look the same.  


Here's the link you'll use WHEN WE'RE DONE to link to the style sheet we create. 

<link rel="stylesheet" type="text/css" href="http://schools.gorge.net/whitesalmon/chs/staff/knowles/calendar.css" />

Delete all the CSS code you've created and been playing with in your file, and replace it with just that one line of code, in between the <head> and </head> tags. Share that file with Mr. Knowles.

Now, whenever the external css file is updated, all changes will automatically appear in yours. 

Wow!
ċ
calendar.css
(2k)
Peter Knowles,
Jan 3, 2012, 1:05 PM
ċ
calendarfull.html
(4k)
Peter Knowles,
Jan 3, 2012, 1:14 PM
Comments