Formatting HTML/XHTML
Session Two
- Introduction to CSS
- CSS Validation
- Page styles
- Browser Testing
Daily Objective
The participant will be able to:
- Describe the syntax of a Cascading Style Sheet (CSS) rule.
- Write and apply valid CSS rules.
- Determine most appropriate type of style for selected purpose.
- Discuss the advantages of CSS.
- Test pages in various browsers.
- Select appropriate color schemes.
Presentation(s):
Instructor Led Project: Files Needed
Participant Project 1: Lab 2 Requirements
Participants will need to complete the following items for their lab project:
Portfolio Page
- External CSS attached to page and used for all formatting.
- CSS uses class (.something, etc), tag (h1, etc), and advanced selector types (a:link, etc).
- Appropriate color scheme selected.
- Style sheet validates against W3C CSS validator.
Vacation Page
- External CSS attached to page and used for all formatting.
- CSS uses class (.something, etc), tag (h1, etc), and advanced selector types (a:link, etc).
- Appropriate color scheme selected.
- Used at least one CSS property not discussed in class (w3schools)
- Style sheet validates against W3C CSS validator.
Personal Project
- Gather materials
- Brainstorm ideas
- Rough sketch layout (wireframing)
Resources
- CSS: http://www.w3schools.com/css/
- CSS: http://hotwired.lycos.com/webmonkey/authoring/stylesheets/tutorials/tutorial1.html
- CSS Validation: http://jigsaw.w3.org/css-validator/
Readings
- Head First: 285-331, 341-363
- Quick Start: 41-46, 133-174
Assignment(s): Due next class @ 5:00pm
- Complete Lab 2 Requirements
- Take Home Assignment #1b: Good Design Practices - Color Contrast and Dimension (optional)
Bonus
- Better Browser (Firefox): http://www.mozilla.com/firefox/
- Web Developer Toolbar (Firefox Extension): http://chrispederick.com/work/webdeveloper/
- IE Tab (Firefox Extension): https://addons.mozilla.org/firefox/1419/
- Colorzilla (Firefox Extension): https://addons.mozilla.org/firefox/271/
- Delicious - Online Bookmarks: http://del.icio.us/ | Firefox Extension
Exit Card
- PLUS/DELTA/NEGATIVE - Please complete class evalutaion before leaving tonight