Hide Notes 

Slide 1: Advanced Techniques for Web Developers The Power of CSS Sandra Clark Senior Software Developer The Constella Group sclark@constellagroup.com
Slide 2: Benefits of CSS • Using CSS creates benefits in: – Development Processes – Visual Display – Accessibility – Extensibility – Bandwidth Savings – Development/Maintenance Time 2
Slide 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. 3
Slide 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. 4
Slide 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 5
Slide 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. 6
Slide 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 7
Slide 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 8
Slide 9: CSS Benefits - Other • Better search engine ranking • Cross-Browser Compatibility – One set of HTML serves all users. • Future Compatibility 9
Slide 10: CSS Benefits – More Examples Nested Tables, formatting in HTML (sample01.html) CSS only (sample02.html) 10
Slide 11: What are Web Standards • Standards of Web Development as recommended by the Worldwide Web Consortium (W3C) presentation. • One of the recommendations is to separate content from • HTML is the content, CSS is the presentation. 11
Slide 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/xhtml1 – http://www.w3.org/TR/xhtml11 • XML – Extensible Markup Language 1.0 – http://www.w3.org/TR/2000/REC-xml-20001006 12
Slide 13: What "Standards" (cont)? – Presentation Languages • CSS – Cascading Style Sheets Levels 1 and 2 – http://www.w3.org/TR/REC-CSS1 – http://www.w3.org/TR/REC-CSS2 – as well as emerging standards, such as those for television and PDA based User Agents. 13
Slide 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 14
Slide 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 15
Slide 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. 16
Slide 17: HTML vs. XHTML • Element and Attribute names must be lowercase – HTML • <H1></H1> • <Input type=“Hidden”> – XHTML • <h1></h1> • <input type=“hidden” /> 17
Slide 18: HTML vs. XHTML • For non empty elements end tags are required. • HTML – <p> • XHTML – <p></p> 18
Slide 19: HTML vs. XHTML • All attribute values MUST always be quoted. – HTML • <input type=Hidden value=‘myvalue’> – XHTML • <input type=“hidden” value=“myvalue” /> 19
Slide 20: HTML vs. XHTML • Attribute names must ALWAYS be in name/value pairs. – HTML • <input type=“checkbox” checked> – XHTML • <input type=“checkbox” checked=“checked”/> 20
Slide 21: HTML vs. XHTML • Empty Elements must be terminated – HTML • <br> • <hr> – XHTML • <br/> • <hr /> 21
Slide 22: HTML vs. XHTML • In XHTML Documents must be well formed. • In XHTML, Documents MUST start with a <!DocType> 22
Slide 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 23
Slide 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. 24
Slide 25: Forcing User Agents into Standards Mode. • • • • • HTML 4.x Strict – <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional – <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 Strict (no xml Declaration) – <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> XHTML 1.0 Transitional (no xml Declaration) – <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> Using an xml declaration with the DocType will Force IE6 and opera into Quirks Mode – Avoid using <?xml version="1.0" encoding="UTF-8"?> 25
Slide 26: Selectors • Selectors are used to select associated elements, ids and classes to apply a particular style rule to. – separated by commas. • More than one selector may be associated with a style rule. • There are many different types of selectors 26
Slide 27: Selector Types • • • • • • • • Type Selector Class Selector ID Selector Descendant Selector Universal Selector Child Selector Adjacent Sibling Selector Attribute Selector 27
Slide 28: Type Selectors • A selector which selects elements in the document’s object model (DOM) – h1 – body – td – br sample03.htm 28
Slide 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 • <p class=“quote error”> – Applies both the quote and error classes to the paragraph. sample04.html 29
Slide 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 30
Slide 31: Class and ID Selectors – Things to know • – Wrong • <p class=“red” /> does not match p.Red{} – Correct • <p class=“red” /> matches p.red{} The name of the class or id in the HTML/XHTML must match the name of the selector exactly. • No spaces – Wrong • <input id=“campus street” /> – Correct • <input id=“campus-street” /> • <input id=“campusStreet” /> 31
Slide 32: Document Structure html head body Title h1 Meta h2 p em p a strong em ul h2 li li li ul li 32
Slide 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 – <p><em></em></p> • ul li em {color: red;} – <ul><li><em></em> – <ul><li><em></em></li></ul></li></ul> 33
Slide 34: Descendant Selector html head body Descendants of Body Title h1 Meta h2 p Descendants of <p> em p a strong em ul Descendants of <ul> h2 li li li ul li sample06.html 34
Slide 35: Child Selector • Selects an element which is a direct child of another element. p > strong > em{ color: green;} li > ul > li { color: green;} 35
Slide 36: Child Selector html head body Title h1 Meta h2 p em p a strong Child of Strong em ul Child of ul h2 li Child of li li li ul li sample07.html 36
Slide 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. 37
Slide 38: Adjacent Sibling Selector html head body Title h1 Adjacent Sibling to h1 Meta h2 p em p a strong em ul h2 li li li ul li sample08.html 38
Slide 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 39
Slide 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 <a> element’s with an href attribute Selects all input elements which are of a type of “radio”. Selects all images whose attribute title contains a space separated list of values. • Matches <img alt=“Figure 1” />, <img alt=“Figure 2” /> input[type=“radio”] img[alt~=”Figure”] • 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 40
Slide 41: Tools for Accessibility • CSS Editors – Best CSS stand alone editor is • Topstyle Pro – http://www.bradsoft.com • HTML Validators – W3C HTML Validator- http://validator.w3.org/ • CSS Validators – http://jigsaw.w3.org/css-validator/ 41
Slide 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/ – Install http://editcss.mozdev.org/installation.html 42
Slide 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 43
Slide 44: Tools for Accessibility • Visual Checkers – aDesigner http://www.alphaworks.ibm.com/tech/adesigner 44