1. Original Slides by Ivan Lee Updated for 2012 by Jason Chen, Madiha Mubin, RJ Yates 1

2. Mac:  TextEdit  TextMate  Coda (editor + FTP + Terminal + CSS editor) Windows:  Notepad  Notepad++ Linux:  Vi  Emacs Note: do NOT be using WYSIWYG functionality – we can tell! Many of the above editors are good for auto-complete though 2

3. Class  http://www.piazza.com/stanford/cs142 http://www.piazza.com/stanford/cs142  w3schools.com  Google Chrome Inspector  Firebug  PixelPerfect - http://pixelperfectplugin.com/http://pixelperfectplugin.com/ Misc:  Color Palettes: kuler.adobe.comkuler.adobe.com 3

4.  Ids are unique  Id attribute: #p20, Example:  Classes can be used multiple time in the same document.  Class attribute:.large, Example:  “There are not any major advantages of IDs over classes”  Browser will display multiple ids. 4

5.  div:  Logical divisions within your web page ▪ Can divide it up into sections with their own attributes ▪ Can have own class ▪ Covers entire horizontal width of parent, with line break before and after  span:  Just like a div, but without the line break  Doesn’t do any formatting on its own  Formatting applies within the line 5

6.   ▪ …  ▪ …   …  6  Table  Must have row to have a col  Can have multiple cols/row  Content generally goes in cols  But every tag can have a class  Remember to close tags

7.  Important attributes to remember:  cellspacing=“ O ”  border-spacing  width (remember the different units)  Pay attention to the border, padding, and margin for the table, tr, and td ▪ Notes - For ‘tr’: border, padding, margin does not work. For ‘td’: margin does not work. 7

8. 8 Source: http://www.iis.sinica.edu.tw/~trc/public/courses/Spring2007/week6/boxdim.png

9.  a:link  a:visited  a:hover  a:active  a:focus  cursor: default | auto | crosshair | text | help… 9

10.  What color do you see on hover?  body { color: black; }  a { color: green; }  a:hover { color: red; } 10

11. 11

12.  visibility:hidden – object just becomes invisible  display:none – as if the object were not there at all  display:block – the element will be displayed as a block-level element, with a line break before and after the element  display:inline – the element will be displayed as an inline element, with no line break before or after the element 12

13.  Two paragraphs  How do we make the background color of the second paragraph purple?  How do we make the first paragraph invisible?  How do we make the first paragraph as if it weren’t there? 13

14. 14

15.  padding-top: 10px;  padding-right: 12px;  padding-bottom: 5px;  padding-left: 100px; =  padding: 10px 12px 5px 100px; 15

16. Part 1:  Figure out what’s required by HTML in both  Then work on CSS and hiding what’s superfluous in each Part 2:  Introduction to images on web pages  (hint: use background images) Part 3:  No need to validate  Easy Peasy 16

17. Unicorns woooooot 17

18.  http://validator.w3.org/#validate_by _upload http://validator.w3.org/#validate_by _upload  XHTML 1.0 Strict  http://jigsaw.w3.org/css- validator/#validate_by_upload http://jigsaw.w3.org/css- validator/#validate_by_upload  CSS level 2. CSS level 3 is OK, but all parts are doable with CSS2 which is prefered. 18

19.  Three things wrong with this example.  Can you figure out what they are? 19

20. 20

21.  1.. Create content first - HTML  2.. Begin styling - CSS  3.. Test - Firebug/PixelPerfect  4.. Repeat ...  5.. Validate  6.. Success! 21

22. 22

23. 23

24. 24