CSS exercises

Site hosted by Angelfire.com: Build your free website today!

Home >> CSS exercises

CSS project #1
‘New Type’

Images of finished page: Top half | Bottom half
What you'll need: Page text | Photo image | Background image

The text font is "Trebuchet MS", a sans-serif font.
On "hover" the hyperlinks turn white, with a blue background and no underline.
The photo and cutline are inside a single DIV that uses the CSS float property.
Give the "photo div" a dashed border. You'll need to preview it in either Mozilla, Netscape 6, or Opera. What happens to the border in Internet Explorer (for Windows)?

CSS project #2
Simple page

Image of finished page: Whole page
What you'll need: Page text | Background image

This page has the simplest stylesheet of the three: only one selector. See if you can get it down to just two declarations. (A declaration is a property/value pair such as background-color: white).
The text font is not formatted at all. (It’s the browser default.)

Two easy ways to look up CSS properties:

Final tip: Ask Rob for more hints.

CSS project #3
Lorem ipsum

Image of finished page: Whole page
What you'll need: Page text | Photo image

Time for some absolute positioning! Only two DIVs: one for the picture, one for the text.
What’s the easiest way to apply that yellow border?
The text DIV has a fixed position but does not have a fixed width.
By the way, the Lorem ipsum text is nonsense filler that has been used for centuries in type specimen books and layouts.