1. CSS Presented by Chris Sanyk Chris SanykChris Sanyk

2. CSS: Why take a class? Basic CSS is really, really easy to learn. Basic CSS is really, really easy to learn. The language syntax is pretty straightforward. The language syntax is pretty straightforward. Examples are everywhere. Just View  Source. Examples are everywhere. Just View  Source. The tools needed to develop CSS are free and available on any computer. The tools needed to develop CSS are free and available on any computer. All you need is a text editor, a web browser, and a few good references. All you need is a text editor, a web browser, and a few good references.

3. CSS: Why take a class: Advanced CSS can be pretty hard. Advanced CSS can be pretty hard. Complex CSS can be hard to work with. Complex CSS can be hard to work with. Dealing with browser inconsistencies can be a pain. Dealing with browser inconsistencies can be a pain. Keeping up to date with CSS as it develops takes effort as well as patience. Keeping up to date with CSS as it develops takes effort as well as patience.

4. Why this class: Most classes I’ve seen or taken have focused on by-the- book basics. I find those are easy enough to pick up on your own. Most classes I’ve seen or taken have focused on by-the- book basics. I find those are easy enough to pick up on your own. What people really need from a class on CSS is to acquire “street smarts” so they can avoid the traps that ordinarily are discovered and defeated through experience. What people really need from a class on CSS is to acquire “street smarts” so they can avoid the traps that ordinarily are discovered and defeated through experience. Hopefully you’ll come out of this with a solid understanding of fundamentals, how to do the basic stuff effectively and efficiently, and maybe a few cool tricks. Hopefully you’ll come out of this with a solid understanding of fundamentals, how to do the basic stuff effectively and efficiently, and maybe a few cool tricks.

5. My Goals NOT to become known as “the CSS guy” NOT to become known as “the CSS guy” I have 3 goals for this class: I have 3 goals for this class: 1.To help others learn CSS and enable them to work with it, and encourage sharing of expertise. 2.To improve my own comfort and competence with CSS so that I can grow. 3.To build a course foundation that can be re-used by any competent instructor, and improved upon in successive teachings, and potentially packaged and sold as a product. What goals do you have? What goals do you have?

6. Student/Audience Where are you at? Where are you at? Silently assess yourself on a 0-4 scale… Silently assess yourself on a 0-4 scale…

7. Your Instructor Overall: 3 Overall: 3 Basics: 4 Basics: 4 CSS for HTML elements: 2 CSS for HTML elements: 2 Browser compatibility: 2 Browser compatibility: 2 CSS positioning: 2 CSS positioning: 2 CSS 3: 1-2 CSS 3: 1-2 Probably some people in the room know more. Let’s collaborate on making the class better! Probably some people in the room know more. Let’s collaborate on making the class better!

8. History Before CSS, HTML used a combination of and attributes=“” for controlling the presentation of a web page. Before CSS, HTML used a combination of and attributes=“” for controlling the presentation of a web page. This was limited at best, and gave rise to really messy ugly code. This was limited at best, and gave rise to really messy ugly code. The worst of it was HTML 3.2. The worst of it was HTML 3.2.

9. History HTML 4 (and XHTML 1), which has been around since 1999, was a major cleanup of this mess, and was very successful in many ways. HTML 4 (and XHTML 1), which has been around since 1999, was a major cleanup of this mess, and was very successful in many ways. 11 years later, we’re just on the cusp of HTML 5. 11 years later, we’re just on the cusp of HTML 5. OK, maybe this is also a testament to the slowness of W3C. OK, maybe this is also a testament to the slowness of W3C. Much of HTML 4’s success is owed to the success of CSS, especially CSS 2.1. Much of HTML 4’s success is owed to the success of CSS, especially CSS 2.1.

10. History Initially, HTML was all there was. Initially, HTML was all there was. It handled both describing the structure of a document, as well as how the document should be presented. It handled both describing the structure of a document, as well as how the document should be presented. Presentational aspects of early HTML were fairly limited, both in terms of the effects that could be achieved, and how they were applied to a document element. Presentational aspects of early HTML were fairly limited, both in terms of the effects that could be achieved, and how they were applied to a document element.

11. History Early 90’s: Early 90’s: HTML started coming together in the early 90’s (IETF) HTML started coming together in the early 90’s (IETF) 1993-94: 1993-94: HTML begins to see real use. NCSA Mosaic launches WWW revolution. Birth of the modern internet. HTML begins to see real use. NCSA Mosaic launches WWW revolution. Birth of the modern internet. 1995: 1995: HTML 2 HTML 2 1996: 1996: CSS 1 becomes a W3C recommendation in 1996. It is fairly basic and not widely supported by web browsers right away. No one can use it in the real world. CSS 1 becomes a W3C recommendation in 1996. It is fairly basic and not widely supported by web browsers right away. No one can use it in the real world.

12. History 1997: 1997: HTML 3.2 becomes the first version of HTML to achieve W3C recommendation status. Previously, HTML was just developed by various people and groups. HTML 3.2 becomes the first version of HTML to achieve W3C recommendation status. Previously, HTML was just developed by various people and groups. HTML 3.2 mostly consolidated a bunch of proprietary extensions to HTML that had been created by Netscape, Microsoft, and others. HTML 3.2 mostly consolidated a bunch of proprietary extensions to HTML that had been created by Netscape, Microsoft, and others. Because browsers don’t support CSS well, and because CSS 1 is so limited, a host of presentational HTML elements and attributes are incorporated into the 3.2 spec, turning it into a horrid mess. HTML 3.2 code is bloated, ugly, and hard to read as content becomes buried in a mess of presentational markup. Because browsers don’t support CSS well, and because CSS 1 is so limited, a host of presentational HTML elements and attributes are incorporated into the 3.2 spec, turning it into a horrid mess. HTML 3.2 code is bloated, ugly, and hard to read as content becomes buried in a mess of presentational markup.

13. History 1998: 1998: CSS 2 becomes W3C recommendation. CSS 2 becomes W3C recommendation. 1999: 1999: CSS 1 finally well-supported in the browser. CSS 1 finally well-supported in the browser. Beginning of a long period of inconsistent, incomplete support for CSS 2.0 in the browser… and seemingly endless frustration for web developers. Beginning of a long period of inconsistent, incomplete support for CSS 2.0 in the browser… and seemingly endless frustration for web developers.

14. History 2003-04 2003-04 Browsers now have decent support for much of CSS 2, and continue to improve. Browsers now have decent support for much of CSS 2, and continue to improve. As of 2008, no browser had fully supported the CSS 2.0 specification. As of 2008, no browser had fully supported the CSS 2.0 specification. 2009: 2009: As of 2009, W3C has only managed to advance CSS 2.1 to “candidate recommendation” status. As of 2009, W3C has only managed to advance CSS 2.1 to “candidate recommendation” status. Despite this, CSS 2.1 is the current dominant de-facto “standard”, and has been reasonably well-supported by browsers since around 2005-6. Despite this, CSS 2.1 is the current dominant de-facto “standard”, and has been reasonably well-supported by browsers since around 2005-6. Sadly, well-supported does not mean “perfectly” or “completely.” Sadly, well-supported does not mean “perfectly” or “completely.”

15. Today CSS 3 is emerging. Parts of it are already widely supported by current versions of major browsers. CSS 3 is emerging. Parts of it are already widely supported by current versions of major browsers. Unfortunately a fair amount of users out there aren’t on the latest versions, so 2.1 is still your best bet. Unfortunately a fair amount of users out there aren’t on the latest versions, so 2.1 is still your best bet. CSS 3 extends and builds on 2.1, so W3C should hurry the hell up and finalize the 2.1 recommendation already. CSS 3 extends and builds on 2.1, so W3C should hurry the hell up and finalize the 2.1 recommendation already.

16. WTF, W3C? W3C risks making itself irrelevant if they can’t release recommendations more quickly. W3C risks making itself irrelevant if they can’t release recommendations more quickly. WWW currently has a strong foundation in open standards. This should not be taken for granted. WWW currently has a strong foundation in open standards. This should not be taken for granted. If these standards do not evolve to meet the needs of web developers, we run the risk of losing this openness. Proprietary innovation could overtake open standards. If these standards do not evolve to meet the needs of web developers, we run the risk of losing this openness. Proprietary innovation could overtake open standards. WWW++ could end up being built from proprietary tech such as Flash and Silverlight. WWW++ could end up being built from proprietary tech such as Flash and Silverlight.

17. On the other hand… Getting 10 (well, OK, more like 5) years use out of something is pretty nice. Getting 10 (well, OK, more like 5) years use out of something is pretty nice. Not having to learn the latest version every year or so frees you from being stuck in the perpetual learning curve, and allows you to get good. Not having to learn the latest version every year or so frees you from being stuck in the perpetual learning curve, and allows you to get good. Stability is great… but only if major problems are solved and deficiencies get addressed. Stability is great… but only if major problems are solved and deficiencies get addressed.

18. CSS weak points Layout Layout Flexible/fluid layout is difficult Flexible/fluid layout is difficult Columns Columns Lacking Orthoganality (orthowha?) Lacking Orthoganality (orthowha?)OrthoganalityorthowhaOrthoganalityorthowha There’s often more than one way to achieve a desired effect, and getting different properties to work together is… screwy. There’s often more than one way to achieve a desired effect, and getting different properties to work together is… screwy. Position, Display, Float: Position, Display, Float: Font sizes and dimensional units. Font sizes and dimensional units. Which do you use, when? Which do you use, when? How do they work together? How do they work together? Selectors are unable to ascend (there’s no “parent of” selector.) Selectors are unable to ascend (there’s no “parent of” selector.) Vertical control (lack thereof, especially with centering). Vertical control (lack thereof, especially with centering). No way to express calculated values. No way to express calculated values. No explicit scope declaration. No explicit scope declaration.

19. CSS weak points User agent settings can mess up your style (local custom CSS, font settings, default colors, etc.) User agent settings can mess up your style (local custom CSS, font settings, default colors, etc.) This is actually a not a weak point, as it means that ultimately the client has control over their preferences. But this can drive designers and product owners nuts because they don’t have absolute control. This is actually a not a weak point, as it means that ultimately the client has control over their preferences. But this can drive designers and product owners nuts because they don’t have absolute control. Even if the standards remain stable, if the browsers are constantly going through updates and their support of CSS changes over time, you’re shooting at a moving target. Even if the standards remain stable, if the browsers are constantly going through updates and their support of CSS changes over time, you’re shooting at a moving target.

20. The Browser Browser Support for CSS Browser Support for CSS Always lags behind W3C, at least for a while. Always lags behind W3C, at least for a while. Sometimes differs from what W3C specifies. (Sometimes browser devs make mistakes, sometimes W3C is vague.) Sometimes differs from what W3C specifies. (Sometimes browser devs make mistakes, sometimes W3C is vague.) Some browsers also support proprietary CSS extensions (got tired of waiting for slow W3C). Some browsers also support proprietary CSS extensions (got tired of waiting for slow W3C). This is fine, insofar as W3C does not own CSS; that’s why they’re called recommendations. This is fine, insofar as W3C does not own CSS; that’s why they’re called recommendations. It does, however, inconvenience web developers when browsers implement CSS support differently. It does, however, inconvenience web developers when browsers implement CSS support differently. Each browser has a “default” stylesheet that it uses for determining what plain HTML looks like. And each is somewhat different. Each browser has a “default” stylesheet that it uses for determining what plain HTML looks like. And each is somewhat different.

21. Browser Support Bottom line: Browser support for CSS is inconsistent. Bottom line: Browser support for CSS is inconsistent. If you’re unlucky, badly interpreted CSS can cause your site to look broken in a particular browser (usually IE). If you’re unlucky, badly interpreted CSS can cause your site to look broken in a particular browser (usually IE). It’s a pain to try to support every platform; it’s sane to support open standards. It’s a pain to try to support every platform; it’s sane to support open standards. Try to stay sane. Try to stay sane. You may not always be able to. You may not always be able to.

22. Browser Support Your website will therefore look slightly different in different browsers. Your website will therefore look slightly different in different browsers. Browsers ignore markup they don’t understand. Browsers ignore markup they don’t understand. Browsers mangle markup they think they understand. Browsers mangle markup they think they understand. Browsers attempt to render invalid markup, but do so inconsistently. Browsers attempt to render invalid markup, but do so inconsistently.

23. HTML + CSS Stop using HTML attributes for controlling presentational aspects of the web page. Stop using HTML attributes for controlling presentational aspects of the web page. Avoid using tables for layout. It’s possible, though difficult, but worth it. Avoid using tables for layout. It’s possible, though difficult, but worth it. Accessibility (508 & WCAG) Accessibility (508 & WCAG) SEO SEO Let HTML provide logical structure, and let CSS handle presentation. Let HTML provide logical structure, and let CSS handle presentation.

24. Why use CSS? Advantages of CSS In a word, reusability. CSS saves you work. In a word, reusability. CSS saves you work. Declare a style rule once, apply it everywhere you need to. Declare a style rule once, apply it everywhere you need to. Content from one page can be brought into another without having to re-work the HTML. (In theory.) Content from one page can be brought into another without having to re-work the HTML. (In theory.) Reduce burden on web server by providing light- weight markup. Reduce burden on web server by providing light- weight markup. Easier maintenance. Easier maintenance. HTML is more readable. HTML is more readable. Less work to make changes to the way the site looks. Less work to make changes to the way the site looks.

25. No, really. Why should I bother to learn CSS? Do you really need to know CSS in order to make web sites? Mmmm… maybe not. Do you really need to know CSS in order to make web sites? Mmmm… maybe not. Consider: do you want to be a codemonkey, or do you want to author content? Consider: do you want to be a codemonkey, or do you want to author content? CMS frameworks do a lot of monkey work for you. They are good. Use them. Even if you’re a codemonkey. Especially if you’re a codemonkey. CMS frameworks do a lot of monkey work for you. They are good. Use them. Even if you’re a codemonkey. Especially if you’re a codemonkey. Use/modify existing templates/themes/etc. Use/modify existing templates/themes/etc. Concentrate on your message, and having something interesting to say. Concentrate on your message, and having something interesting to say.

26. Why learn CSS? Control. Control. Customization. Customization. Do something unique. Do something unique. You want to understand why the #@%* your web site doesn’t look right in $browser, and fix it. You want to understand why the #@%* your web site doesn’t look right in $browser, and fix it. Someone’s giving you money. Someone’s giving you money.

27. How to use CSS Connecting CSS to HTML Connecting CSS to HTML Linked stylesheets Linked stylesheets Embedded stylesheets Embedded stylesheets Inline style declarations Inline style declarations

28. Linked Stylesheets The preferred way. An external.css file contains your CSS code, and can be referenced by multiple HTML documents. Maximizes reusability. The preferred way. An external.css file contains your CSS code, and can be referenced by multiple HTML documents. Maximizes reusability. HTML document can reference multiple.css files, and take on styling from each of them. HTML document can reference multiple.css files, and take on styling from each of them. goes in the element. goes in the element.

29. Embedded Stylesheets Not very reusable, since the CSS rules can only be utilized by the HTML document it is embedded within. Not very reusable, since the CSS rules can only be utilized by the HTML document it is embedded within. Useful in the event that you need to make sure the HTML file stays with its CSS markup. Useful in the event that you need to make sure the HTML file stays with its CSS markup. Devious “css injection” possibilities… (don’t allow tag in web forums, or users will do bad things to your site.) Devious “css injection” possibilities… (don’t allow tag in web forums, or users will do bad things to your site.) is w3c-valid only in but most browsers will accept it in is w3c-valid only in but most browsers will accept it in

30. Inline style attribute style=“declaration1; declaration2;” style=“declaration1; declaration2;” Nearly any HTML element can take a style attribute Nearly any HTML element can take a style attribute Inline styles are more specific; that is, they will override rules declared in external or embedded stylesheets. Inline styles are more specific; that is, they will override rules declared in external or embedded stylesheets. Inline styles are good for ad hoc or temporary solutions, but at the expense of the re-usability of the HTML/content. They’re fine for posting comments to discussion boards. Inline styles are good for ad hoc or temporary solutions, but at the expense of the re-usability of the HTML/content. They’re fine for posting comments to discussion boards.

31. CSS Syntax Selectors Selectors Properties Properties Values Values Comments Comments property:value = declaration. property:value = declaration. ; = separator. ; = separator. Single declarations or the end declarations don’t technically need ; it is a separator, not a terminator. Single declarations or the end declarations don’t technically need ; it is a separator, not a terminator. Selector {property: value;} /* Comment */

32. CSS Syntax Whitespace doesn’t matter (with one important exception.) Whitespace doesn’t matter (with one important exception.) Format for readability, try to be consistent. Format for readability, try to be consistent. CSS itself is not case sensitive. CSS itself is not case sensitive. Treat it like it is anyway; some browsers seem to implement it as case sensitive, and urls referencing resources in CSS are case sensitive. Treat it like it is anyway; some browsers seem to implement it as case sensitive, and urls referencing resources in CSS are case sensitive.p{font-size:10pt; color: red; } div, p, h1 {font- family: arial;} #head {background- image: url(/caseSentitive- url-to/image.jpg);}

33. CSS Syntax: Selectors Universal Universal Named element Named element Class Class ID ID * div div.myclass.myclass #MyID #MyID

34. Combinations Class and ID selectors can combine with elements to make a more specific rule: Class and ID selectors can combine with elements to make a more specific rule: p.myclass{} selects only p.myclass{} selects only Not Not p#MyID{} selects only p#MyID{} selects only Not Not

35. CSS Syntax: Selectors (advanced) List of selectors (comma) List of selectors (comma) Descendent selector (space) Descendent selector (space) Child selector Child selector Sibling selector Sibling selector h1,.myclass,.otherclass {} h1,.myclass,.otherclass {}.myclass p {}.myclass p {} ul > li {} h1 + p{}

36. Classes, IDs Use IDs for unique regions on page, since ID value must be unique for the page. Use IDs for unique regions on page, since ID value must be unique for the page. Make ID and Class names semantic, not descriptive. (e.g.,.warning -- not.red ) Make ID and Class names semantic, not descriptive. (e.g.,.warning -- not.red )

37. CSS Selectors Pseudo-classes Pseudo-classes :link :link :visited :visited :hover :hover :active :active :focus :focus :first-child :first-child

38. CSS Selectors Pseudo-element Pseudo-element :first-line :first-line :first-character :first-character :after :after :before :before

39. CSS 2.1 Selector Summary PatternMeaning * Matches any element. E Matches any E element (i.e., an element of type E). E F Matches any F element that is a descendant of an E element. E > F Matches any F element that is a child of an element E. E:first-child Matches element E when E is the first child of its parent. E:link E:visited Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). E:active E:hover E:focus Matches E during certain user actions. E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined). E + F Matches any F element immediately preceded by a sibling element E. E[foo] Matches any E element with the "foo" attribute set (whatever the value). E[foo="warning "] Matches any E element whose "foo" attribute value is exactly equal to "warning". E[foo~="warnin g"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". E[lang|="en"] Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en". DIV.warning Language specific. (In HTML, the same as DIV[class~="warning"].) E#myid Matches any E element with ID equal to "myid".

40. Other CSS Fundamentals Font size and dimensional units Font size and dimensional units Colors Colors The Box Model The Box Model

41. Font size WTF Proportional or Absolute? Proportional or Absolute? Absolute units: pt px in cm mm Absolute units: pt px in cm mm Proportional units: ex em % Proportional units: ex em % Each has pros and cons; there is no ideal perfect method. Each has pros and cons; there is no ideal perfect method. Proportional units are usually the way to go. Proportional units are usually the way to go. Absolute units are useful in some cases Absolute units are useful in some cases (print media) (print media) Be careful/take advantage of nested proportional sizing. Be careful/take advantage of nested proportional sizing.

42. Colors Days of 216 “web safe” colors is long gone. Days of 216 “web safe” colors is long gone. Descriptive color names Descriptive color names Only 16 color names are actually W3C standard. Only 16 color names are actually W3C standard. +124 (for a total of 140) more color names (orig. Netscape) are widely supported. But does each browser truly render them all identically? These can’t be relied upon absolutely for all user agents; some may not support them at all. +124 (for a total of 140) more color names (orig. Netscape) are widely supported. But does each browser truly render them all identically? These can’t be relied upon absolutely for all user agents; some may not support them at all. System color names (OS-specific; maybe customized by user). System color names (OS-specific; maybe customized by user). #xxxxxx; hex notation #xxxxxx; hex notation #xxx; #xxx; (shorthand, less precision, saves 3 bytes of bandwidth) (shorthand, less precision, saves 3 bytes of bandwidth) RGB(0-255,0-255,0-255) and RGB(0-100%,0-100%,0-100%) RGB(0-255,0-255,0-255) and RGB(0-100%,0-100%,0-100%) (why bother?) (why bother?) Seem to be popular in generated code for some reason. Seem to be popular in generated code for some reason. If using number values, it can be helpful to comment with a name or description of the color. If using number values, it can be helpful to comment with a name or description of the color. End user monitors are very likely not color calibrated, accuracy is not critical. End user monitors are very likely not color calibrated, accuracy is not critical.

43. Colors “Transparent” named color “Transparent” named color Transparency and elements Transparency and elements Background color Background color Text Text Images Images Gradients Gradients

44. The Box Model http://www.blogoff.es/2010/02/01/15-articulos-de-css-para-principiantes/

45. Positioning static (default) static (default) relative (offset relative to static) relative (offset relative to static) absolute (offset relative to first non-static parent) absolute (offset relative to first non-static parent) fixed – position in a fixed position within the window viewpane. Does not scroll. fixed – position in a fixed position within the window viewpane. Does not scroll. IE support spotty. ( IE >= 7) IE support spotty. ( IE >= 7)

46. Float and Clear float and clear are not implemented consistently among all leading browsers. This is why they are sometimes more of a pain than they should be. float and clear are not implemented consistently among all leading browsers. This is why they are sometimes more of a pain than they should be. Blame IE for its bad behavior with float. Usually can be fixed with an extra to wrap the element and float the. Blame IE for its bad behavior with float. Usually can be fixed with an extra to wrap the element and float the. Floated elements do not influence the height of their parent. Beware overflowing floats. Floated elements do not influence the height of their parent. Beware overflowing floats. Use 0-height with Clear after a overflowing Floated element if you need to fix it. Use 0-height with Clear after a overflowing Floated element if you need to fix it.

47. Float and Clear float:left or float:right takes the element out of normal flow, and wraps other content around it. float:left or float:right takes the element out of normal flow, and wraps other content around it. If the floated HTML element does not have a defined width, float will not work properly unless you provide a width value. (,,, etc.) The floated element’s width has to be narrower than its parent. If the floated HTML element does not have a defined width, float will not work properly unless you provide a width value. (,,, etc.) The floated element’s width has to be narrower than its parent.

48. Float and Clear clear tells the browser what to do with the next element that comes after a floated element. clear tells the browser what to do with the next element that comes after a floated element. If an element clears, it will start on the next line, not wrap around the floated element. If an element clears, it will start on the next line, not wrap around the floated element. You can clear:left, clear:right, or clear:both. You can clear:left, clear:right, or clear:both. clear applies to the element occurring after a floated element, not to the floated element. clear applies to the element occurring after a floated element, not to the floated element.

49. Display vs. Visibility Be aware of distinction between display:none and visibility:hidden. Be aware of distinction between display:none and visibility:hidden. Display:none collapses. Display:none collapses. Visibility:hidden takes up space. Visibility:hidden takes up space.

50. HTML De- -fication was always intended for tabular data. was always intended for tabular data. Originally HTML had little/nothing else available for laying out pages. Originally HTML had little/nothing else available for laying out pages. was purposed for this. was purposed for this. is reasonably easy to design and is rendered consistently by browsers. is reasonably easy to design and is rendered consistently by browsers. You don’t get weird bugs with table based layouts like you will with a based layout. You don’t get weird bugs with table based layouts like you will with a based layout.

51. So why nix ? Return to its intended purpose (yeah but why?) Return to its intended purpose (yeah but why?) Allow machine readers (that’s Search Engines as well as assistive reader technologies) to read the page and interpret it correctly. Allow machine readers (that’s Search Engines as well as assistive reader technologies) to read the page and interpret it correctly. Improve your search result rankings as table contents do not score as high in SEO as do properly marked up page content. Improve your search result rankings as table contents do not score as high in SEO as do properly marked up page content.

52. Getting there If you’re still in a world of based layouts, you’re behind a few years. If you’re still in a world of based layouts, you’re behind a few years. If you’re a complete newbie and are just getting the hang of HTML+CSS and aren’t doing anything serious, use layouts for a while like training wheels. If you’re a complete newbie and are just getting the hang of HTML+CSS and aren’t doing anything serious, use layouts for a while like training wheels. Get used to using CSS to control all presentational aspects and get good at that. Worry about making “proper” layouts later. Get used to using CSS to control all presentational aspects and get good at that. Worry about making “proper” layouts later.

53. Getting there When you’re ready to transition from table to div layout… When you’re ready to transition from table to div layout… Hopefully you’re using a framework or CMS that does it for you already and you don’t have to worry. Find a template or whatever and go! Hopefully you’re using a framework or CMS that does it for you already and you don’t have to worry. Find a template or whatever and go! If one does not exist exactly like what you want, find one that’s close, and tweak it. If one does not exist exactly like what you want, find one that’s close, and tweak it.

54. Getting there If not using a CMS or framework, work into it. If not using a CMS or framework, work into it. Start simple. Start simple. Re-do your layout iteratively. Re-do your layout iteratively. Challenge yourself to use as FEW tables as possible. (Most layouts use NESTED tables. The more nesting, the worse for accessibility.) Challenge yourself to use as FEW tables as possible. (Most layouts use NESTED tables. The more nesting, the worse for accessibility.) Work on eliminating the inner tables first. Work on eliminating the inner tables first. Stick with fixed-width layouts until you’re really good. Fluid layouts are harder & not necessarily better. Stick with fixed-width layouts until you’re really good. Fluid layouts are harder & not necessarily better.

55. Using CSS Effectively… Selector Specificity Selector Specificity Select only what you want Select only what you want Use a container and descendant selectors Use a container and descendant selectors Efficiency Efficiency Re-usability Re-usability Avoid “leaking” (being too general with a selector declaration.) Avoid “leaking” (being too general with a selector declaration.) Learn the “Cascade” and take advantage of it. Learn the “Cascade” and take advantage of it.

56. Specificity and the Cascade Selector specificity: Selector specificity: !important trumps all (except client overrides) !important trumps all (except client overrides) Conflicting rules: Conflicting rules: Top score wins. Top score wins. Tie goes to last declared. Tie goes to last declared. Rules that don’t conflict accumulate. Rules that don’t conflict accumulate. http://www.blogoff.es/2010/02/01/15-articulos-de-css-para-principiantes/

57. …And Efficiently Use lists of selectors to consolidate like blocks code. Use lists of selectors to consolidate like blocks code. Use comments to explain what you’ve done and why. Use comments to explain what you’ve done and why.

58. Common useful CSS CSS reset CSS reset #ID Regions with descendant selectors and unstyled children #ID Regions with descendant selectors and unstyled children Font size: what type of units? Font size: what type of units? CSS Box model CSS Box model

59. Clever/Cool CSS Transparency Transparency :hover effects :hover effects Positioning Positioning Conditional rules Conditional rules Dynamic CSS with Javascript Dynamic CSS with Javascript Combining multiple classes in one element. Combining multiple classes in one element. CSS sprites CSS sprites CSS3 Served fonts CSS3 Served fonts

60. CSS for other media Not just for the screen! Not just for the screen! Printer – definitely use. Printer – definitely use. Get rid of the “printable view” link. Test by printing to PDF or Print Preview; avoid wasting paper. Get rid of the “printable view” link. Test by printing to PDF or Print Preview; avoid wasting paper. Mobile Devices – maybe use. Mobile Devices – maybe use. Hard to test for. Mobile devices vary widely, and most are still bad. Hard to test for. Mobile devices vary widely, and most are still bad. Aural – for text-to-speech technologies. Aural – for text-to-speech technologies. Consider using, especially if you are concerned with accessibility. Consider using, especially if you are concerned with accessibility.

61. Tips Look at your site with CSS turned off. Look at your site with CSS turned off. If it’s readable and the placement of stuff makes sense, that’s a good sign that your HTML doesn’t suck. If it’s readable and the placement of stuff makes sense, that’s a good sign that your HTML doesn’t suck. Be sure your HTML uses a doctype declaration… Be sure your HTML uses a doctype declaration… and complies with it. and complies with it. Validate your HTML and your CSS. Validate your HTML and your CSS.

62. Dealing with non-standard browser behavior Should you? Should you? If it breaks the site. If it breaks the site. If you’re being paid. If you’re being paid. If you’re a perfectionist. If you’re a perfectionist. If you’re a masochist. If you’re a masochist. Use web server stats to decide if it makes sense. Use web server stats to decide if it makes sense.

63. Understanding browser-specific issues Accessibility/Usability Accessibility/Usability Cosmetic Cosmetic

64. If you have to address browser- specific problems… Try standards first. Try standards first. If standards-compliant CSS is handled differently by some browser… IE If standards-compliant CSS is handled differently by some browser… IE use a conditional stylesheet to handle it, rather than “one size fits all” code. use a conditional stylesheet to handle it, rather than “one size fits all” code. Try to keep your browser-specific fixes short, isolated, commented, and tidy. Try to keep your browser-specific fixes short, isolated, commented, and tidy. Use tools to hone in on the problem. Use tools to hone in on the problem. See Useful Tools slide coming up See Useful Tools slide coming up

65. Handling for IE6 Eric asked… “What to do in IE6 vs. everything else” Eric asked… “What to do in IE6 vs. everything else” Tie a rock to it and drop it off the continental shelf Tie a rock to it and drop it off the continental shelf Seriously, it’s 2010 FFS. Seriously, it’s 2010 FFS. Serve a warning to the user that their browser is unsafe for web browsing and recommend they upgrade use something else. Serve a warning to the user that their browser is unsafe for web browsing and recommend they upgrade use something else. If you absolutely must support IE6 for some reason… If you absolutely must support IE6 for some reason… Make sure you have IE6 around to test with. Make sure you have IE6 around to test with. Use IE conditionals to attach an IE6-specific.css that overrides the standard-compliant stuff if the user agent reports itself as IE6. Use IE conditionals to attach an IE6-specific.css that overrides the standard-compliant stuff if the user agent reports itself as IE6. Use hacks as a last resort. Use hacks as a last resort. Many ways to do different stuff. Google for ideas. Come up with your own if you can do better. Many ways to do different stuff. Google for ideas. Come up with your own if you can do better.

66. Recommended resources The Web The Web W3Schools.com W3Schools.com W3Schools.com W3C.org W3C.org W3C.org www.css3.info www.css3.info www.css3.info www.d.umn.edu/itss/support/Training/Online/we bdesign/css.html www.d.umn.edu/itss/support/Training/Online/we bdesign/css.html www.d.umn.edu/itss/support/Training/Online/we bdesign/css.html www.d.umn.edu/itss/support/Training/Online/we bdesign/css.html A slew of web developer blogs, YMMV. Google & bookmark. A slew of web developer blogs, YMMV. Google & bookmark.

67. A few good articles and resources http://jontangerine.com/log/2007/09/the- incredible-em-and-elastic-layouts-with-css http://jontangerine.com/log/2007/09/the- incredible-em-and-elastic-layouts-with-css http://www.bigbaer.com/css_tutorials/css.imag e.text.wrap.htm http://www.bigbaer.com/css_tutorials/css.imag e.text.wrap.htm http://www.bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm http://www.bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm http://riddle.pl/emcalc/ http://matthewjamestaylor.com/blog/perfect- 3-column.htm http://matthewjamestaylor.com/blog/perfect- 3-column.htm

68. Recommended resources Print Print Web Design in a Nutshell 3 rd Edition (O’Rielly) Web Design in a Nutshell 3 rd Edition (O’Rielly) CSS pocket reference (O’Rielly) CSS pocket reference (O’Rielly) HTML Utopia: Designing Without Tables Using CSS ISBN0-9752402-7-7 HTML Utopia: Designing Without Tables Using CSS ISBN0-9752402-7-7 CSS: The Missing Manual CSS: The Missing Manual CSS: The Definitive Guide CSS: The Definitive Guide

69. Useful Tools Mozilla Mozilla Web Developer Toolbar Web Developer Toolbar Firebug Firebug Validator extensions Validator extensions ColorZilla (color picker) ColorZilla (color picker) MeasureIt (pixel ruler) MeasureIt (pixel ruler)

70. Useful Tools Safari tools Safari tools Suggest any Suggest any Chrome tools Chrome tools Suggest any Suggest any IE IE IE Developer Toolbar IE Developer Toolbar Notepad++ Notepad++

71. Awe and Inspiration www.romancortes.com – Godlike CSS. www.romancortes.com – Godlike CSS. www.romancortes.com Pure CSS portraits of George W. Bush, Homer Simpson, other amazing CSS marvels. Pure CSS portraits of George W. Bush, Homer Simpson, other amazing CSS marvels. Your site here! Do something extraordinary. Your site here! Do something extraordinary.

72. Homework Teach this class. Teach this class. Improve this class. Improve this class. Create reference examples of various CSS properties and applications. Create reference examples of various CSS properties and applications. Make a web site. Make a web site. Do something creative. Do something creative. Bring in a tricky problem you’re stuck on and get people to help you. Bring in a tricky problem you’re stuck on and get people to help you.