Homework Page
CIS 50.11C - Cascading Style Sheets
Sammi Contreras - 5407
lessons: 2/3 :: 4 :: 5/6 :: 7 :: 8 :: 9/10 :: 11 :: 12 :: 13 :: 14/16 :: final
Lesson 2/3 - CSS Basics
"Live Site" with an external
style sheet added
live.css file with a multiple and contextual selector
Cascade Sampler
cascade.css
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
Shadow Sampler
Live Site
Live CSS Stylesheet
The font and text properties I used are as follows:
- font-variant: small-caps (heading 2)
- letter-spacing: 0.5 (heading 2)
- @font-face: CavierDreams_Bold
- text-indent: (Used on header 2)
- font-size: 90% (questions in content)
- font-style: italic (questions in content)
Lesson 5/6 - Position Properties
Live site with <div> tags colorized
Live site with box properties
Box Property Sampler
Position Samples
position-static
position-relative
position-absolute
position-fixed
Image Gallery
Live Site
Live CSS Stylesheet
Lesson 7 - Backgrounds
Border Radius Sampler
Box Shadow Sampler
Gradient Sampler
Multiple Background Sampler
Lesson 8 - Midterm
Lesson 9/10 - Layout Part 1 and 2
2 Column Fixed Example
2 Column Fixed - Right Example
2 Column Fluid Example
1 Column Fluid Example
3 Column Fixed Example
3 Column Fluid Example
3 Column Fluid Center Example
Lesson 11 - Layout Part 3
2 Column Absolute Example
3 Column Absolute Example
3 Column with Header Example
Order of Content Example
Lesson 12 - Layout Part 4
Live Site - 2 Column Fixed
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
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
