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

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

Class   w3schools.com  Google Chrome Inspector  Firebug  PixelPerfect - Misc:  Color Palettes: kuler.adobe.comkuler.adobe.com 3

 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

 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  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

 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 Source:

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

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

11

 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

 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

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

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

Unicorns woooooot 17

 _upload _upload  XHTML 1.0 Strict  validator/#validate_by_upload validator/#validate_by_upload  CSS level 2. CSS level 3 is OK, but all parts are doable with CSS2 which is prefered. 18

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

20

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

22

23

24