Homework Page
CIS 50.11C - Cascading Style Sheets
Anthony Climo - 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 - including multiple and contextual selector
Cascade Sampler
cascade.css FILE
Selector Sampler
Lesson 4 - Font and Text Properties
live site with font and text properties applied. The properties I used are ...
relative file
relative big
relative small
fixed file
fixed small
vertical alignment
@font-face using google and local fonts
text shadow sampler
Lesson 5/6 Position Properties
Box Property sampler
Position Properties Sampler which consists of 4 files:
Position Property -
static
Position Property
- relative
Position Property
- absolute
Position Property -
fixed
Image Gallery
image gallery sampler
Lesson 7 - Backgrounds
border radius sampler
box shadow sampler
gradient sampler
multiple background project
Lesson 8 - Midterm
Lesson 9 - IE/Browser Simulators
post your comments to the class message board
Lesson 10/11 - 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
Lesson 12 - Layout part 3
2 column absolute
3 column absolute
3 column with header
order of content
Lesson 13 - Layout part 4
live site - 2 column fixed
live site - 2 column fluid
live site - 3 column fixed
live site - 3 column fluid
Lesson 14 - Tables and Forms
table sampler
styled form
Lesson 15/16 - Navigation
simple horizontal navigation
links that display an image that has 4 states
horizontal naviation bar with 3 levels of drop down navigation
vertical navigation
"I added a third level to the shops section see if you notice it. Thought it was pretty cool."
sliding door navigation
live site with either drop down, vertical door navigation
live site navigation css
Final
(You will notice I included my links to the other pages on the top of the original design, notice too that the css file will not validate that is due to using the css 3.0 opacity. CSS 3.0 is not standard so you would need to access the site "http://jigsaw.w3.org/css-validator/" and then select more options choose "css level 3" then it will validate. This is due to opacity being used in the css.) Pages that use CSS 3.0 are "original design", "div tags colorized" and "modified design". "CSS explained" and "images explained" used the standard "css level 2.1")
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
