1. Advanced Techniques for Web Developers The Power of CSS Sandra Clark Senior Software Developer The Constella Group sclark@constellagroup.com

2. 2 Benefits of CSS Using CSS creates benefits in: –Development Processes –Visual Display –Accessibility –Extensibility –Bandwidth Savings –Development/Maintenance Time

3. 3 CSS Benefits - Development Site wide look and feel consistency HTML does what it was meant to do –Provides a structural context QA easy to determine when validating code.

4. 4 CSS Benefits – Visual Display Can easily create and change a standard look and feel. Same page can show different styles for printing and the screen.

5. 5 CSS Benefits - Accessibility Separates Content from Presentation. –By doing this, we create web sites easily that incorporate accessibility requirements without having to think about it. Properly structured content facilitates use of screen readers Tableless design facilitates keyboard tabbing

6. 6 CSS Benefits - Extensibility One document can be associated with different visual interpretations –Printing vs. Screen –Screen vs. Projection Tableless layouts display well on hand-helds and mobiles with no changes.

7. 7 CSS Benefits - Bandwidth Page sizes can be reduced by 25-50% Without nested tables, pages are rendered faster by the User Agent. Better user experience

8. 8 CSS Benefits - Maintenance Site Wide changes are easily implemented HTML is easier to develop and maintain HTML will work in future User Agents. Shorter Development Times = Faster time to Market. Smaller Pages = Less Bandwidth

9. 9 CSS Benefits - Other Better search engine ranking Cross-Browser Compatibility –One set of HTML serves all users. Future Compatibility

10. 10 CSS Benefits – More Examples Nested Tables, formatting in HTML (sample01.html) CSS only (sample02.html)

11. 11 What are Web Standards Standards of Web Development as recommended by the Worldwide Web Consortium (W3C) One of the recommendations is to separate content from presentation. HTML is the content, CSS is the presentation.

12. 12 What "Standards"? When we speak about "standards" for the Web, we mean: –Structural Languages XHTML –Extensible Hypertext Markup Language 1.0 and 1.1 –http://www.w3.org/TR/xhtml1http://www.w3.org/TR/xhtml1 –http://www.w3.org/TR/xhtml11http://www.w3.org/TR/xhtml11 XML –Extensible Markup Language 1.0 –http://www.w3.org/TR/2000/REC-xml-20001006http://www.w3.org/TR/2000/REC-xml-20001006

13. 13 What "Standards" (cont)? –Presentation Languages CSS –Cascading Style Sheets Levels 1 and 2 –http://www.w3.org/TR/REC-CSS1http://www.w3.org/TR/REC-CSS1 –http://www.w3.org/TR/REC-CSS2http://www.w3.org/TR/REC-CSS2 –as well as emerging standards, such as those for television and PDA based User Agents.

14. 14 Why design to the standard “Designing and building with these standards simplifies and lowers the cost of production, while delivering sites that are accessible to more people and more types of Internet devices. Sites developed along these lines will continue to function correctly as traditional desktop browsers evolve, and as new Internet devices come to market.” –http://www.webstandards.org

15. 15 HTML, XHTML & CSS HTML/XHTML for document structure –Structure does matter CSS for presentation –If it isn’t content it doesn’t belong in HTML

16. 16 XHTML XHMTL is an xml compliant version of HTML 4.01 Benefits of using XHTML –Easier to validate against –Because its more stringent, we are more careful. –Requires the use of CSS for all presentation. –Standard across most User Agents.

17. 17 HTML vs. XHTML Element and Attribute names must be lowercase –HTML –XHTML

18. 18 HTML vs. XHTML For non empty elements end tags are required. HTML – XHTML –

19. 19 HTML vs. XHTML All attribute values MUST always be quoted. –HTML –XHTML

20. 20 HTML vs. XHTML Attribute names must ALWAYS be in name/value pairs. –HTML –XHTML

21. 21 HTML vs. XHTML Empty Elements must be terminated –HTML –XHTML

22. 22 HTML vs. XHTML In XHTML Documents must be well formed. In XHTML, Documents MUST start with a

23. 23 DocType Sniffing A DocType contains the formal delimitation of the markup grammar. Most modern User Agents use the DocType to choose what mode it will render your HTML

24. 24 Which Mode am I In? To check which Rendering mode your computer is in, use the following: –IE6 – Opera javascript:alert(document.compatMode); –CSS1CompatMode – Standards Based Rendering –Mozilla – Netscape CTRL-I for page information.

25. 25 Forcing User Agents into Standards Mode. HTML 4.x Strict – HTML 4.01 Transitional – XHTML 1.0 Strict (no xml Declaration) – XHTML 1.0 Transitional (no xml Declaration) – Using an xml declaration with the DocType will Force IE6 and opera into Quirks Mode –Avoid using

26. 26 Selectors Selectors are used to select associated elements, ids and classes to apply a particular style rule to. More than one selector may be associated with a style rule. –separated by commas. There are many different types of selectors

27. 27 Selector Types Type Selector Class Selector ID Selector Descendant Selector Universal Selector Child Selector Adjacent Sibling Selector Attribute Selector

28. 28 Type Selectors A selector which selects elements in the document’s object model (DOM) –h1 –body –td –br sample03.htm

29. 29 Class Selectors Applies a style to an element having the specified class attribute. –More than one element may have the same class. –Specified with ‘.’ before the class name –Examples p.quote –Applies to all paragraphs with a class of “quote”.error –Applies to any element with a class of “error”. –More than one class may be applied to an element –Applies both the quote and error classes to the paragraph. sample04.html

30. 30 ID Selectors Similar to class selectors, except that an id must be unique in a page. –Use a # in the selector –div#container selects the div element with the id of “container”. –#container selects the element with the id of “container”. sample05.html

31. 31 Class and ID Selectors – Things to know The name of the class or id in the HTML/XHTML must match the name of the selector exactly. –Wrong does not match p.Red{} –Correct matches p.red{} No spaces –Wrong –Correct

32. 32 Document Structure

33. 33 Descendant Selector Used to select elements which are descendants of another element in the document tree. –Example: p em {font-weight:bold;} –Any emphasized text which is a descendant of p – ul li em {color: red;} –

34. 34 Descendant Selector sample06.html

35. 35 Child Selector Selects an element which is a direct child of another element. p > strong > em{ color: green;} li > ul > li { color: green;}

36. 36 Child Selector sample07.html

37. 37 Adjacent Sibling Selector Selects an element which immediately follows another element in the document markup. –h1 + p Any text appearing between markup will not affect this selector. Not supported in IE.

38. 38 Adjacent Sibling Selector sample08.html

39. 39 Universal Selector Used to select any element. –Acts as a wildcard symbol. div * p –Selects paragraphs that are at least one selector removed (grandhildren) of a div sample09.html

40. 40 Attribute Selector Used to select elements based on the presence of either specific attributes or their values. 4 types of Attribute Selectors a[href] –Selects all element’s with an href attribute input[type=“radio”] –Selects all input elements which are of a type of “radio”. img[alt~=”Figure”] –Selects all images whose attribute title contains a space separated list of values. Matches, html[lang|=“en”] –Selects any element whose attribute has a value which is a hyphen separated list beginning with a specified value. Matches en, en-us,en-uk. sample10.html

41. 41 Tools for Accessibility CSS Editors –Best CSS stand alone editor is Topstyle Pro – http://www.bradsoft.comhttp://www.bradsoft.com HTML Validators –W3C HTML Validator- http://validator.w3.org/http://validator.w3.org/ CSS Validators –http://jigsaw.w3.org/css-validator/

42. 42 Tools for Accessibility Browser Toolbars and Extensions –Mozilla / Firefox Web Developer Toolbar - http://chrispederick.com/work/webdeveloper/ Edit CSS Extension –Home Page http://editcss.mozdev.org/http://editcss.mozdev.org/ –Install http://editcss.mozdev.org/installation.html

43. 43 Tools for Accessibility Mozilla/Netscape Toolbars and Extensions –IE View http://miavsd.servehttp.com/rubicon/extension/ –(scroll down to IE View Lite) –Internet Explorer Toolbars Web Accessibility Toolbar

44. 44 Tools for Accessibility Visual Checkers –aDesigner http://www.alphaworks.ibm.com/tech/adesigner http://www.alphaworks.ibm.com/tech/adesigner