Advanced CSS Techniques

In this lab exercise, we work on a website that already has some basic CSS rules applied. We modify the existing rules and add some new ones as a way to practice some more advanced CSS techniques. The purpose of this lab exercise is to give students a chance to practice reading CSS code and understanding how to construct a CSS declaration. Additionally, the lab exercise demonstrates some additional CSS properties and concepts that have been discussed in passing in the assigned reading, but have not been directly covered in class yet. Specifically, this activity shows how to use linear-gradient() to set a background color, how to use the CSS pseudo-classes :hover and :active to add simple interactivity, and finally a use-case for transition: transform .2s; and transform: scale(1.5); to create a very basic animation effect.

Download a copy of the lab exercise handout here: Click Here! (PDF, 112 KB)

A copy of the files used during this exercise is available for you to download: Click Here (Box.com shared folder)