Homework Page

CIS 50.11C - Cascading Style Sheets

Carol Beaman - Section 1384

bannerCarol

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

Create the following files to illustrate how to stretch and shrink fonts

* relative.html
* relative-big.html
* relative-sm.html
* fixed.html
* fixed-small.html

Vertical Align Text sampler

@font-face using google and local fonts

text shadow sampler

live site with font and text properties
css file

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/10 - Layout Part 1 and 2

2 column layout fixed

2 column layout fixed right

2 column layout fluid

1 column layout fluid

3 column fixed (uses Aslett and faux column image)

3 column fluid

3 column fluid center

Lesson 11- Layout part 3

2 column absolute

3 column absolute

3 column with header

order of content

Lesson 12 - Layout part 4

Live - 2 column fixed layout

Live - 2 column fluid layout

Live - 3 column fixed layout

Live - 3 column fluid center layout

Lesson 13 - Forms and Tables

Table Samples

Styled Form

Lesson 14/15/16 -

Simple horizontal navigation

Page with links that display an image in the background that has 4 states (link, visited, hover, active)

background image - box_colorRoll

Horizontal navigation bar that has drop down navigation, pop out navigation, and second level pop out navigation. (for a total of 4 levels of navigation)

Vertical Navigation

Sliding Door Navigation

Live site look under the lesson link for my drop down menus

Final

link to original css Zen Garden design that I chose

link to design with div tags colorized, color key of div tags, explanation of how they fit into each other

link to css file explained

link to images explained

link to modified design

 

Valid CSS!

Valid XHTML 1.0 Transitional