micahbell/css_sandbox

css_sandbox

OBJECTIVE: This workshop is designed to explore the foundations of CSS.

EXIT TICKETS: By the end of the workshop, students will be able to style a CNN website widget using various CSS styles.

1. Level one should be able to at least the core layout of the widget without assisteance.
2. Level two should be able to reproduce the entire widget
3. Level three should be able to reproduce the entire widget and add an hover effect to vinyl record image

DO NOW:

Create a box within a box in CSS, where each box has a different color.

TOPICS:

Selectors examples: p , #my_id , .this_class order of selectors and combining selectors

The Box Model Content area, padding, border, margin

Position related float position: static relative absolute fixed examples

display: none, block, [inline], [inline-block]

Image related background: url('file.jpg')

Pseudo classes :hover