Homework Page
CS 50.11C - Cascading Style Sheets
Maylin Chin- Section 1384
Homework Page
lessons: 2/3 / 4 / 5/6 / 7 / 8 / 9 / 10/11 / 12 / 13 / 14 / 15/16 / final
Lesson 2/3 - CSS Basics
Links to live page and live css file:
live page
live.css file
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:
live page
live.css file
- added background color
- h1 & h2: font-weight:normal;font-size:1.5em;color:#666;letter-spacing:0.2em;text-transform:uppercase; line-height:.5em;
- h1 has an increased font sixe to 2.5em with an underline decoration
- h2 is in italic font-style with a letter spacing of 0.74em
- #top_nav text-transform:uppercase
- p>strong adjusted color, and modifciations to font to seperate from #main_content
relative file
relative big
relative small
fixed file
fixed small
vertical alignment
@font-face using google and local fonts
test shadow sampler
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 sampler
box shadow sampler
gradient sampler
multiple background project
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 fixed right
2 column fluid
1 column fluid
3 column fixed (uses Aslett and faux column image)
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
Live site - 2 column fixed
Live site - 2 column fluid
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
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.
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
Return to top
