arts343

• Course Method
• Syllabus

• Schedule
• 01.20 - Intro
• 01.22 - HTML
• 01.27 - Project 1
• 01.29 - HTML
• 02.03 - Project 1
• 02.05 - CSS
• 02.10 - Project 1
• 02.12 - CSS
• 02.17 - Project 2
• 02.19 - PHP
• 02.24 - Project 2
• 02.26 - Wordpress
• 03.03 - Project 2
• 03.05 - Wordpress/PHP
• 03.10 - Project 3
• 03.12 - XML
• 03.17 - Project 3
• 03.19 - XML / XSLT / RSS
• 03.31 - Project 3
• 04.02 - RSS
• 04.07 - Project 4
• 04.09 - Processing
• 04.14 - Project 4
• 04.16 - Processing
• 04.21 - Project 4
• 04.23 - Processing
• 04.28 - Arduino
• 04.30 - Processing/Arduino
• 05.05 - Survey/Wrap-Up

• Collections
• Imagined Worlds

• Projects
• Project 1
• Project 2
• Project 3
• Project 4

• Platforms
• HTML
• CSS
• PHP
• Wordpress
• XML/XSLT
• RSS
• Processing
• Arduino

• Design Methods
• Paper Protyping

School of Art and Design - UIUC

• Built with Indexhibit

02.12 - CSS

I. The CSS Box Model:

Every HTML element can be divided into the following components:
1. content
2. margin
properties:
- margin
- margin-top (etc)
3. border
properties:
- border-width
- border-top-width (etc)
- border-style
- border-top-style (etc)
- border-color
- border-top-color (etc)

4. padding
properties:
- padding
- padding-top (etc)

Setting width and height

II. CSS Positioning

1. divs, ids, classes
2. display property: inline vs block
3. position property
- static
- relative
- absolute
- fixed
4. left
5. right
6. top
7. flow and float

III. Inheritance, parent - sibling, etc

IV. Homework:

Create a basic HTML page that includes nine images and some text. Create at least four CSS styles to make it look as different as possible, where one of the four forms a grid, without using tables. Save each version as a separate HTML document. Be ready to turn in to me next Thursday.