Homework Page

CIS 50.11C - Cascading Style Sheets

Sushrut Acharya - Section 1384

lessons: 2/3 :: 4 :: 5/6 :: 7 :: 8 :: 9/10 :: 11 :: 12 :: 13 :: 14 :: 15/16 :: final

Lesson 2/3 - CSS Basics

Link to live page :: link to live css file

Live page with external style sheet added
live.css file - include a multiple and contextual selector

Cascade Sampler
cascade.css file

Selector Sampler

Lesson 4 - Font and Text Properties

relative file
relative big
relative small
fixed file
fixed small

vertical alignment

@font-face using google and local fonts

text shadow sampler

live site with font and text properties applied.
css file
The properties I used are font-family, font-weight, font-style, line-height, font-variant, text-transform, text-indent among others.

Lesson 5/6- Position Properties

live site with <div> tags colorized

Live site with box properties
CSS file

box property sampler

position-static
position-relative
position-absolute
position-fixed

image gallery

Lesson 7 - Backgrounds

border radius sampler

box shadow sampler

gradient sampler

multiple background project

Lesson 8 - Midterm

Lesson 9/10- Layout part 1 and 2

2 column layout fixed

2 column layout fixed right

2 column layout fluid

1 column layout fluid

3 column fixed (uses Aslett and faux column image)

3 column fluid

3 column fluid center

Lesson 11 - Layout part 3

2 Column Absolute

3 Column Absolute

3 Column with Header

Order of Content

Lesson 12 - CSS Layout Properties

Live site - 2 column fixed

Live site - 2 column fluid

Live site - 3 column fixed

Live site - 3 column fluid center

Lesson 13 - Tables and Forms

Tables Sampler

Styled Form

Lesson 14/15/16 - Navigation

Simple Horizontal Navigation

Links that Display an Image that has 4 States

Drop-down Horizontal Navigation with more pop-out Navigation Menus

Vertical Navigation

Sliding Door Navigation

Live Site with Advanced Navigation

Final

link to the original design on the web

link to design with div tags colorized, color key of div tags, explanation of how they fit together

css file explained

images explained

final modified design

Valid XHTML 1.0 Strict

Valid CSS!