Advanced Techniques for Web Developers The Power of CSS

Sandra Clark Senior Software Developer The Constella Group [email protected]

Benefits of CSS

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

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

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

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

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

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

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

CSS Benefits - Other

• Better search engine ranking • Cross-Browser Compatibility – One set of HTML serves all users.

• Future Compatibility 9

CSS Benefits – More Examples

Nested Tables, formatting in HTML (sample01.html) CSS only (sample02.html) 10

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.

11

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

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

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

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

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

HTML vs. XHTML

• Element and Attribute names must be lowercase – HTML •

• – XHTML •

• 17

HTML vs. XHTML

• For non empty elements end tags are required.

• HTML –

• XHTML –

18

HTML vs. XHTML

• All attribute values MUST always be quoted.

– HTML • – XHTML • 19

HTML vs. XHTML

• Attribute names must ALWAYS be in name/value pairs.

– HTML • – XHTML • 20

HTML vs. XHTML

• Empty Elements must be terminated – HTML •
•

---

– XHTML •
•

---

21

HTML vs. XHTML

• In XHTML Documents must be well formed.

• In XHTML, Documents MUST start with a 22

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

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

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 25

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 26

Selector Types

• • • • • • • • Type Selector Class Selector ID Selector Descendant Selector Universal Selector Child Selector Adjacent Sibling Selector Attribute Selector 27

Type Selectors

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

28

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

29

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

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 • • 31

Document Structure

head Title Meta h1 body html h2 p p em h2 ul li a strong em li ul li li 32

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;} –

• –

33

Descendant Selector

head Title Meta h1 html body h2 p p em h2 Descendants of Body ul li a Descendants of

strong em Descendants of

li ul li li sample06.html

34

Child Selector

• Selects an element which is a direct child of another element.

p > strong > em{ color: green;} li > ul > li { color: green;} 35

Child Selector

head Title Meta h1 html body h2 p p em h2 a strong em ul li Child of li li ul Child of Strong Child of ul li li sample07.html

36

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

Adjacent Sibling Selector

head Title Meta h1 html body h2 p p em h2 Adjacent Sibling to h1 ul li a strong em li ul li li sample08.html

38

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

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

40

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

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

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

Tools for Accessibility

• Visual Checkers – aDesigner http://www.alphaworks.ibm.com/tech/adesigner 44