We have spent a fair amount of time on HTML so I felt it was a good time to move onto looking at CSS.  We talked about the content being stored in HTML and the appearance settings being in CSS code.

We looked at CSS Zen Garden and saw how different the page can look depending on the CSS file.  This is a site where the HTML page is always the same but the CSS file is very different!

We then looked at a couple of projects in Mozilla Thimble.  First we looked at Get Off My Lawn, where you have to change the CSS positioning code to move furniture around to defend your house against zombie attack!  Later in this project you can add your barricades.  I chose a steel door.  One pupil chose a lion, which I felt would be risky as it might turn into a zombie lion!

You can then customise your zombies.  I’m afraid I was boring and just added a picture of myself.  I should have zombiefied myself first but I ran out of time.

Some pupils moved onto a different positioning project called Bunny Masher where you have to find different ways of saving a little bunny rabbit from being horribly squished by a huge bunny mashing machine.

Positioning in CSS can be done by pixels (px), percentage (%) or ’em’.  An em is a multiple of a predefined size. The predefined size is the current font size, so 1em = current font size.  We discussed why on earth would we want to use em instead of the far easier px or %.  We thought back to our discussion the other day about accessibility and realised that if someone wanted to make the font size larger then there will be times you want to adjust positioning of graphics around the text because you can’t set the font to be a fixed size.