Homework Page

CIS 50.11C - Cascading Style Sheets

Scott Hubbard - Section 1385

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

The Live Site and the Live CSS file with font and text properties applied. The properties I used are the following:

1. Added a <div id="title"> tag and a multiple shadow with the transparent attribute to the top two lines;
2. Added a font face using the local method;
3. Added a contextual selector for both the <h1> & <h2> tags with a font size;
4. Added a contextual selector for the font-family and font-size for the <a> tags;
5. Anchor Link Pseudo-Class for:
   • Link class: color and text-decoration;
   • Visited class: text-decoration;
   • Hover class: color and text-decoration;
6. Added contextual selector for the font-size and line-height for the <p> and <li> tags
7. Added a font-size for the <strong> tag

relative file
relative big
relative small
fixed file
fixed small
vertical alignment
@font-face using google and local fonts
test shadow sampler

Optional Pages
font sampler
text sampler

Lesson 5/6- Position Properties

Live Site with <div> tags colorized
Live Site with box properties
Live CSS file with position properties applied.

box property sampler

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

image gallery

Optional Page
border-sampler

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
2 column fixed right
2 column fluid
1 column fluid
3 column fixed
3 column fluid
3 column fluid center

Optional Pages
2 column fixed align left w/ left navigation
2 column fixed align left w/ right navigation
2 column fluid w/ right navigation
2 column fluid align left w/ right navigation
2 column fluid align left w/ left navigation
2 column content fixed navigation fluid

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 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 4 levels of drop down navigation
vertical navigation
sliding door navigation
The Live Site and the Live CSS file with either drop down, vertical or sliding door navigation.

Optional Page
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