CS 50.11C - Cascading Style Sheets
lessons: 2/3 :: 4 :: 5/6 :: 7 :: 8 :: 9/10 :: 11 :: 12 :: 13 :: 14/15/16 :: final
Link to live page :: link to live css file
"Live page" with external
style sheet added
live.css file - includes a multiple and contextual selector
Cascade Sampler
cascade.css file
live site
live.css
The properties I added are:
1) font-family for the body (preferably Trebuchet MS)
2) font-size for the body (small)
3) line-height for the body (150%)
4) text-decoration for links (none)
5) font-weight for links (bold)
relative file
relative big
relative small
fixed file
fixed small
@font-face using google and local fonts
position-static.html
position-relative.html
position-absolute.html
position-fixed.html
live site with <div> tags colorized
live site with box properties
live.css
border radius sampler
box shadow sampler
gradient sampler
multiple background sampler
2 column layout fixed
2 column layout fixed right
2 column layout fluid
1 column layout fluid
3 column fixed (uses Aslett faux column)
3 column fluid
3 column fluid center
2 column absolute
3 column absolute
3 column with header
order of content
(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
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 vertical navigation
link to original design: Verdure by Lim Yuan Qing
link to design with div tags colorized, color key of div tags, explanation of how they fit together
css explained
images explained
modified design