Homework Page

CIS 50.11C - Cascading Style Sheets

Victoria Brown - Section 1385

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 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

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 negative centered
• 3 column fluid negative 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
• Live Site-CSS

FINAL

• final-color-div.html
• final-css-explain.html
• final-images-explain.html
• final-modified.html
• modified.css