CIS 50.11C - Cascading Style Sheets
lessons: 2 :: 3/4 :: 5 :: 6/7 :: 8 :: 9 :: 10/11 :: 12 :: 13 :: 14 :: 15/16 :: final
Here is a link to the table based page
Here is the page with the tables, javascript stripped out of it. old code
Here is the page after code has been modified to pass XHTML validation clean code
"Live lesson" with external
style sheet added
bus-web.css file - include a multiple selector
Cascade Sampler
cascade.css file
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
live site with font and
text properties
css file
Position Property -
static
Position Property
- relative
Position Property
- absolute
Position Property -
fixed
Live site with <div> tags colorized
live site with box properties
css file
post your commentws to the class message board
2 column layout using absolute positioning
3 column layout using absolute positioning
3 column with header and footer using float and clear
Live site - web page
Live site - css file
3 fixed columns with a background image, so the 3 columns go down the entire length of the columns.
3 columns with fluid side columns and 2 background images, so the 3 columns go down the entire length of the columns.
The"live site" with a background image (fixed or fluid your choice).
3 column fixed centered
3 column fluid centered
live site with centering trick
CSS file that controls live site
Table Sampler
Styled Form
Simple horizontal navigation
Page with links that display an image in the background that has 4 states (link, visited, hover, active)
view image
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
link to original design
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