Homework Page

CSS 50.11C - Cascading Style Sheets

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

live site with font and text properties applied. The properties I used are font-size in body and headers. Font Family in body and headers. Font decoration on p strongs.

Relative File
Relative Big
Relative Small
Fixed
Fixed Small

Vertical Alignment

@font-face using google and local fonts

Text Shadow

Lesson 5/6- Position Properties

live site with <div> tags colorized

Live site with box properties

box property sampler

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

image gallery

Lesson 7 - Backgrounds

border radius

box shadow

gradients

multiple backgrounds

Lesson 8 - Midterm

Lesson 9 - IE / Browser Simulators

post your comments to the class message board

Lesson 10/11- Layout part 1 and 2

2 column fixed

2 column flxed right

2 column fluid

1 column fluid

3 column fixed

3 column fluid

3 column fluid center

Lesson 12 - Layout part 3

2 column absolute

3 column absolute

3 column with header

order of content

Lesson 13 - Layout part 4

(please note I have 4 examples on my homework page, you are required to produce only 3)

live site - 2 column fixed

live site - 2 column fluid

live site 3 - column fixed

live site - 3 column fluid

Lesson 14 - Tables and Forms

table sampler

styled form

Lesson 15/16 - Navigation

simple horizontal navigation

links that display an image that has 4 states

sample image link

horizontal navigation bar with 3 levels of drop down navigation.

vertical navigation

sliding door navigation

live site with sliding door navigation.

Final

link to original design

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

css explained

images explained

modified design