Megan Bennett's Homework Page

CIS 50.11C - Cascading Style Sheets

Section 1384

Lesson 2 - XHTML

templeofasura@sbcglobal.net

Here is a link to the table based page:
table

Here is the page with the tables, javascript stripped out of it:
old code

Here is the page after code has been modified so that it validates:
clean code

Lesson 3/4 - CSS Basics

Live lesson; with external style sheet added
The CSS file for Live.html

Cascade Sampler .
The file for cacade-sampler.html

Selector Sampler.

Lesson 5 - Font and Text Properties

Create the following files to illustrate how to stretch and shrink fonts

relative.html
relative-big.html
relative-small.html
fixed.html
fixed-small.html

Vertical Align Text sampler

live site with font and text properties
css file along with explanation of what the code does

Lesson 6/7- Position Properties

Box Property sampler

Position Property - static
Position Property - relative
Position Property - absolute
Position Property - fixed

float and clear sampler

Live site with <div> tags colorized

live site with box properties
css file

Lesson 8 - Midterm

Lesson 9 - IE / Firefox Developer Toolkit / Browser Simulators

post your commentws to the class message board

Lesson 10/11- Layout part 1 and 2

2 column layout using absolute positioning

3 column layout using absolute positioning

3 column with header and footer using float and clear

Aslett clearing method

Live site - web page
Live site - css file

Lesson 12 - Layout part 3

3 fixed columns with a background image, so the 3 columns go down the entire length of the columns.

3 columns with fluid side columns and 2 background images, so the 3 columns go down the entire length of the columns.

The"live site" with a background image (fixed or fluid your choice).

CSS file

Lesson 13 - CSS Layout Properties

3 column fixed centered

3 column fluid centered

live site with centering trick

CSS file that controls live site

Lesson 14 - Tables and Forms

Table Sampler

Styled Form

Lesson 15/16 - Navigation

Simple horizontal navigation

Page with links that display an image in the background that has 4 states (link, visited, hover, active)

view image

Horizontal navigation bar that has drop down navigation, pop out navigation, and second level pop out navigation. (for a total of 4 levels of navigation)

Vertical Navigation

Sliding Door Navigation

Live site with enhanced navigation

Live site CSS

The Final

Zen Garden original site link - Seashore

Div Colorized

CSS Explained

Images Explained

Site Redo

Site Redo CSS