Homework Page
CS 50.11C - Cascading Style Sheets
Section 5408
lessons: 2/3 :: 4 :: 5/6 :: 7 :: 8 :: 9/10 :: 11 :: 12 :: 13 :: 14/16 :: final
Lesson 2/3 - CSS Basics
Link to live page and 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
Selector Sampler
Lesson 4 - Font and Text Properties
live site with font and text properties applied.
Live Css
Relative Example
Relative Big
Relative Small
Fixed Example
Fixed Small Example
Vertical Alignment
@font_face using google and local fonts
Text Shadow Sampler
Lesson 5/6- Position Properties
live site with <div> tags colorized
Box Property sampler
Position-static
Position-relative
Position-absolute
Position-fixed
Image Gallery
live site with box properties
css file
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 Fixed Layout
2 Column Fixed Right
2 Column Layout Fluid
1 column Layout Fluid
3 column fixed
3 column fluid
3 column fluid center
3 column faux-aslet
Lesson 11 - Layout part 3
2 column absolute
3 column absolute
3 column with header
order of content
Lesson 12 - 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 fixed Css
live site - 2 column fluid
live site 3 - column fixed
live site - 3 column fluid
Lesson 13 - Tables and Forms
table sampler
styled form
Lesson 14/16 - Navigation
Simple horizontal navigation
Links that display an image that has 4 states
background image-
Horizontal navigation bar with 3 levels of drop down navigation.
Vertical navigation
Sliding door navigation
Live site with either drop down, vertical or sliding door navigation.
Css file used for live site.
Final
link to original design
link to design with div tags colorized, color kep of div tags, explanation of how they fit together.
css explained
images explained
modified design
