Lesson 2 and 3 - CSS Basics

My "Live page" with external style sheet added

live.css file - _nclude a multiple and contextual selector

Cascade Sampler
CSS File
Selector Sampler

Lesson 4 - Font and Text Properties

Links to live site with font and text properties applied and the CSS file.

The properties I used are:

  1. font-style- I applied an italic style to the first child strong tag in the p tag so they are strong and italic.
  2. font-variant- I created a div and used the font-variant uppercase command to change the navigation to uppercase letters
  3. font-size - I used the Base 10 font size method for setting fonts thoughout the webpage
  4. line-height - I added 150% line height to all p tags
  5. font-family- I set fonts for a p and h1 though h3 tags
  6. text-indent - The first paragraph of each section is now indented 1.5em
  7. text-align - I created a header div and use the text-align command to center all content
relative file
relative big
relative small
fixed file
fixed small vertical alignment
font-face using google and local fonts
text shadow sampler
back to top

Lesson 5 and 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
back to top

Lesson 7 - Backgrounds

radius sampler
box shadow sampler
gradient sampler
multiple background project
back to top

Lesson 8 - Midterm

Lesson 9 and 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
back to top

Lesson 12 - Layout part 3

2 column absolute
3 column absolute
3 column with header
order of content

back to top

Lesson 13 - Layout part 4

This weeks assignment gave me problems to say the least. Although my pages pass HTML and CSS validation, I had issues with the left and right column divs being longer than the main content!

live site - 2 column fixed
live site 3 - column fixed
live site - 3 column fluid
back to top

Lesson 14 - Tables and Forms

live site 3 - Table Sampler
live site - Form Sample

back to top

Lesson 15 and 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

 

back to top

Valid XHTML 1.0 Strict Valid CSS!