1. css a web designer’s friend!

2. What is css? Simple “language” for formatting documents written in markup languages Stands for cascading style sheets, referring to hierarchy or inheritance of formatting Powerful tool for controlling the look of pages and entire sites

3. Why Bother? Can’t I just use DW design mode or HTML code for formatting*? HTML not developed as design tool Code becomes non-standard Code is bloated *”I swear –I really, really don’t mind changing each of the 1,583 font tags on my site when I want to change the text color!”

4. Why is css my friend? Using good html and css will help you develop code that is:  Streamlined  Standardized Valid Accessibility and usability Cross-platform, cross-browser, cross- device, cross-designer

5. How do I know my html and code are valid? Use these testing tools (validators): W3c http://validator.w3.org/ http://validator.w3.org/ Dreamweaver (under Results) Developer’s Toolbar for Firefox Don’t wait until you’re finished to test your code! Test along the way.

6. What do I need to know about using style sheets and valid code? There’s a lot to learn, but remember: 1.always define a DOCTYPE in your HTML * 2. don’t leave validation and testing until the end: –test cross-browser –test cross-platform –validate your code and css as you go

7. What is the difference between content and presentation? unstyled content for zen garden www.csszengarden.com

8. How does css work? Can be placed in HTML document itself or linked to as a separate document To use with HTML or XHTML, you’ll need to become familiar with code:

9. What does css look like? Close-up of a basic css rule body {background-color: #FFFFCC; } selectordeclaration = property: value +

10. What does css look like? Close-up of a more complex css rule h1, h2 { font-family: georgia, palatino, “times new roman”, serif; font-weight: bold; margin: 0 0 0 0; padding:.5em 0.5em 0; text-align: center; color: #314F7B; line-height:1em; background-color:#ff9; } selectors declarations +

11. What is css inheritance? My home page My home page Welcome to my home page! Let me tell you about my favorite composers: John Lennon Tupac Beethoven The code on the left results in the “document tree” below:

12. How do I learn to use css? Learn to code in html (current version is xhtml) Use Code View instead of Design View in DW as much as possible Use css resources (see CSS Toolkit links) Look at styles by others – easy with Firefox and its Developer’s toolbar (see Toolkit for link to download from)

13. css vs. Dreamweaver Templates? cssdwt Easy site-wide changes √√ Protects areas of code √ Helps make valid, standard code √ Accessibility and Usability improved √ Code is streamlined √ Forward Compatibility √