Homework Page

CS 50.11C - CSS

Albert Shanto - Section 1384

Lesson 2- XHTML

Here is a link to the table based page

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

Here is the page after code has been modified to pass XHTML validation clean code

Lesson 3/4 - CSS Basics

"Live lesson" with external style sheet added
live.css file - include a multiple selector

Cascade Sampler
cascade.css file

Selector Sampler

Lesson 5 - Font & Text Properties

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

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

Vertical Align Text sampler

"Live site" with font and text properties
live.css file

Font Sampler
Text Sampler

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 Colorized

Live Site with Position Properties
live.css file

Lesson 8 - Midterm

Lesson 9 - IE / Firefox Developer Toolkit / Browser Simulators

Comments posted 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 Layout with Header and Footer Using Float and Clear
Aslett Clearing method

Live Site
live.css file

Lesson 12 - Layout part 3

3 Column Fixed-Width with Background Image
3 Column Fluid with 2 Background Images

Live Site
live.css file

Lesson 13 - CSS Layout Properties

3 Column Fixed-Width Layout Using Negative Centering
3 Column Fluid Layout Using Negative Centering

Live Site centering trick
live.css file

Lesson 14 - Tables and Forms

Table Sampler
Styled Form

Lesson 15/16 - Navigation

Linda's List Sampler
Simple Horizontal
4 States with Image
Image for 4 States
Drop-Down Pop-Out
Vertical Pop-Out
Sliding Door

Live Site with Sliding Door
live.css file

Final

Original Zen Garden Page
Part1 - Div Tags Explained
Part1 - CSS for Div Tags Exp.
Part 2 - CSS Explained
Part 3 - Images Explained
Part 4 - Modified Zen Garden
Part 4 - CSS for Modified Zen Garden

Valid XHTML 1.0 Strict graphic: Valid CSS 2.1