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

Selector Sampler

Lesson 4 - Font and Text Properties

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

Relative font sample

Relative font- big sample

Relative font- small sample

Fixed font sample

Fixed font- small sample

Vertical alignment sample

@font-face using google and local fonts sample

Test shadow sample

live site with font and text properties applied.

Live site with font and text properties

css file

The properties I used are......

• body tag (font-family:Verdana, Geneva, sans-serif, font-size:75%
• h1, h2, and strong tags (font-family:Arial, Helvetica, sans-serif, color:#FFF, text-shadow: 3px 3px 4px #900)
• h1 tag {font-size:2em}
• h1 tag where class = "top" (font-variant:normal, font-weight:400)
• h3 tag (font-variant:small-caps, font-weight:300, color:#090)
• Id = "section" (font-weight:400, color:yellow)
• h2 tag where Id = "todo" (font-size:2.2em, color:yellow, font-style:italic)
• h3 tag where Id ="todo" (font-family:"Arial Black", Gadget, sans-serif, font-size:2.6em, color:#0C0, font-style:italic, font-weight:100, font-variant:small-caps)
• Id = "numbers" (font-weight:200)
• Strong and anchor tags where Id = "intro-questions" (font-family:Verdana, Geneva, sans-serif; font-style:oblique, color:#F00)
• blockquote tag (font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-style:italic, font-weight:100)
• ordered lists (font-style:italic)
• unordered lists (font-style:oblique)
• a:link (color:blue)
• a:visited (color:#90F)
• a:hover (color:#0F0)
• a:active (background-color:#09F)
• Id = "materials" (background-color:#333, color:#FFF, font-style:oblique)
• anchor tag where Id= "materials" (background-color:#333, font-size: 18px; color:#FFF, font-style:normal)

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 fixed Left

2 column flxed right

2 column fluid

1 column fluid

3 column fixed

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

(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 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