Homework page

CS 50.11C - Cascading Style Sheets

Margaret Ogilvie
Section 4478

Email Margaret Ogilvie

Lesson 2 - XHTML

Here is a link to the original table based Business of Web Design

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

Here is the page after code has been modified to pass XHTML 1.0 Strict validation: clean-code.html.

 

Lesson 3/4 - CSS Basics

live-site - with external style sheet added
live.css file - including a multiple selector

Cascade Sampler
cascade.css

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-sm.html
fixed.html
fixed-small.html

Vertical Align Text sampler

live site with font and text properties
css file

font-sampler.html

text-sampler.html

Lesson 6/7- Position Properties

Box Property sampler

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

float clear sampler

Live site with <div> tags colorized

live site with box properties
css file

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

Three fixed columns with a background image

Three columns with fluid side columns and 2 background images

Live site with background image

Live site - 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 with centering trick

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

view image

Horizontal navigation bar that has drop down navigation, pop out navigation, and second level pop out navigation

Vertical Navigation

Sliding Door Navigation

Live site (hover over to do list)

CSS for live site

Final

Link to chosen Zen Garden page

Part 1div tags explained

Part 2 css explained

Part 3 images explained

Part 4 change existing css

the modified css

Valid XHTML 1.0 Strict

Valid CSS!