Advanced Techniques for Web Developers The Power of CSS Sandra Clark Senior Software Developer The Constella Group [email protected].

Advanced Techniques for Web DevelopersThe Power of CSS

Sandra ClarkSenior Software DeveloperThe Constella Group

[email protected]

2

Benefits of CSS

• Using CSS creates benefits in:

– Development Processes

– Visual Display

– Accessibility

– Extensibility

– Bandwidth Savings

– Development/Maintenance Time

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

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

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

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

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

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

CSS Benefits - Other

• Better search engine ranking

• Cross-Browser Compatibility

– One set of HTML serves all users.

• Future Compatibility

10

CSS Benefits – More Examples

Nested Tables, formatting in HTML

(sample01.html)

CSS only

(sample02.html)

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

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

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.

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

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

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

HTML vs. XHTML

• Element and Attribute names must be lowercase

– HTML

• <H1></H1>

• <Input type=“Hidden”>

– XHTML

• <h1></h1>

• <input type=“hidden” />

18

HTML vs. XHTML

• For non empty elements end tags are required.

• HTML

– <p>

• XHTML

– <p></p>

19

HTML vs. XHTML

• All attribute values MUST always be quoted.

– HTML

• <input type=Hidden value=‘myvalue’>

– XHTML

• <input type=“hidden” value=“myvalue” />

20

HTML vs. XHTML

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

– HTML

• <input type=“checkbox” checked>

– XHTML

• <input type=“checkbox” checked=“checked”/>

21

HTML vs. XHTML

• Empty Elements must be terminated

– HTML

• <br>

• <hr>

– XHTML

• <br/>

• <hr />

22

HTML vs. XHTML

• In XHTML Documents must be well formed.

• In XHTML, Documents MUST start with a <!DocType>

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

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

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/xhtml1-strict.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/xhtml1-transitional.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"?>

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

Selector Types

• Type Selector

• Class Selector

• ID Selector

• Descendant Selector

• Universal Selector

• Child Selector

• Adjacent Sibling Selector

• Attribute Selector

28

Type Selectors

• A selector which selects elements in the document’s object model (DOM)

– h1

– body

– td

– br

sample03.htm

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

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

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

• <p class=“red” /> does not match p.Red{}

– Correct

• <p class=“red” /> matches p.red{}

• No spaces

– Wrong

• <input id=“campus street” />

– Correct

• <input id=“campus-street” />

• <input id=“campusStreet” />

32

Document Structure

html

head body

Title

Meta

h1

h2

h2

p

p

em a strong

em

ul

li li

ul li

li

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>

34

Descendant Selector

sample06.html

html

head body

Title

Meta

h1

h2

h2

p

p

em a strong

em

ul

li li

ul li

li

Descendants of Body

Descendants of <p>

Descendants of <ul>

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

Child Selector

sample07.html

html

head body

Title

Meta

h1

h2

h2

p

p

em a strong

em

ul

li li

ul li

li

Child of Strong

Child of li

Child of ul

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

Adjacent Sibling Selector

sample08.html

html

head body

Title

Meta

h1

h2

h2

p

p

em a strong

em

ul

li li

ul li

li

Adjacent Sibling to h1

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

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

• 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 <img alt=“Figure 1” />, <img alt=“Figure 2” />

• 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

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/

42


• 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

43


• 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


• Visual Checkers

– aDesigner http://www.alphaworks.ibm.com/tech/adesigner