CSS for Designers

869 views
774 views

Published on

A wide-ranging overview of important CSS concepts for people new to CSS. These are the things I wish somebody sat me down and explained to me when I was first starting out with CSS.

Includes some material recycled from my other talks, including a little about selectors and typography.

Lecture given to 3rd year students of interactive design at the Holon Institute of Technology (Israel).

1 Comment
2 Likes
Statistics
Notes
  • these are the best done slides on the topic i have ever seen. great job.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
869
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
17
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

CSS for Designers

  1. 1. CSS— a talk about — frontend development for designers Idan Gazit • @idangazit HIT • 24th November 2010
  2. 2. http://flic.kr/p/7TYgHL
  3. 3. http://flic.kr/p/6TnQbA I COME FROM AMERICA My Hebrew sucks.
  4. 4. don’t be afraid. deep but doable
  5. 5. Photo by adesigna - http://flic.kr/p/7eukcs
  6. 6. Photo by Yandle - http://flic.kr/p/4sfHWp WIREFRAMES
  7. 7. Photo by xiaming - http://flic.kr/p/JP3Xs SEMANTIC MARKUP
  8. 8. Photo by wwarby - http://flic.kr/p/3q3A3r LOTS OF EFFORT
  9. 9. especially IE6
  10. 10. Tables Flash <img>
  11. 11. Tables Flash <img> unsemantic unsemantic unreadableiOS
  12. 12. Tables Flash <img> unsemantic unsemantic unreadableiOS Future Proofing.
  13. 13. Block vs. Inline The Box Model Positioning Selectors Typography and CSS break!
  14. 14. Markup CSS
  15. 15. BLOCK VS. INLINE
  16. 16. Block Inline
  17. 17. div p h1…h6 ul, ol, li span a img strong, em Block Inline
  18. 18. BLOCK 100% width height according to content can contain both inline and block content can control positioning
  19. 19. BLOCK Block 1 Block 2 Block 3 Block 4 Block 5
  20. 20. INLINE height according to content width according to content can contain content (and other inlines) automatic position in flow
  21. 21. INLINE Block 1 Inline 1 2 3 4 5 6 7 7 8 Block 2 Inline 1 2 3 4 5 6 7 7 8 Block 3
  22. 22. width height margin padding width height margin padding Block Inline
  23. 23. width height margin padding width height margin padding Block Inline
  24. 24. div p h1…h6 ul, ol, li span a img strong, em Block Inline
  25. 25. <div id=“article_header”>
  26. 26. section header, footer article nav Block HTM L 5
  27. 27. display: block force an element to be block-level
  28. 28. THE BOX MODEL
  29. 29. WTF? Doesn’t work the way you expect.
  30. 30. HOW BIG AM I? div { width: 400px; height: 500px; padding: 10px; border: 1px solid black; margin: 20px; }
  31. 31. HOW BIG AM I? width: 400px +10 +10 +1 +1 = 422px height: 500px +10 +10 +1 +1 = 522px padding left + right border left + right padding top + bottom border top + bottom
  32. 32. Math size + padding + border = actual size
  33. 33. More Math “width: auto;” containing block width - margin - border - padding = content width.
  34. 34. especially IE6
  35. 35. POSITIONING
  36. 36. position : Static; Relative; Absolute; Fixed;
  37. 37. STATIC Block 1 Block 2 Block 3 Block 4 Block 5
  38. 38. RELATIVE Block 1 Block 3 Block 4 Block 5 display: relative left: 50px top: 50px
  39. 39. RELATIVE Block 1 Block 3 Block 4 Block 5 display: relative left: -50px top: -50px
  40. 40. RELATIVE Block 1 Block 3 Block 4 Block 5 display: relative
  41. 41. ABSOLUTE Block 1 Block 3 Block 4 Block 5 Block 2 position: absolute; left: 0;
  42. 42. ABSOLUTE Block 1 Block 3 Block 4 Block 5 Block 2 position: absolute; right: 0; bottom:0;
  43. 43. position: relative ABSOLUTE Block 1 Block 3 Block 4 Block 2 position: absolute; right: 0; top: 100px;
  44. 44. position: relative ABSOLUTE Block 1 Block 3 Block 4 Block 2 position: absolute; right: 0; left: 0; bottom:0;
  45. 45. position: relative FIXED Block 1 Block 3 Block 4 Block 2 position: fixed; right: 0; bottom:0;
  46. 46. position: relative FIXED Block 1 Block 3 Block 4 Block 2 position: fixed; right: 0; left: 0; bottom:0;
  47. 47. z-index control overlap
  48. 48. floats remove elements from flow
  49. 49. position: relative FLOATS Block 1 Block 2 Block 3 Block 4
  50. 50. position: relative FLOATS Block 1Block 2 float: left; width: 200px; height: 300px; Block 3 Block 4
  51. 51. Margin Collapsing unintuitive
  52. 52. MARGIN COLLAPSING Block 1 margin-bottom: 50px Block 2 margin-top: 30px ??px
  53. 53. MARGIN COLLAPSING Block 1 margin-bottom: 50px Block 2 margin-top: 30px 50px
  54. 54. W3C www.w3.org/TR/CSS2/box.html
  55. 55. Photo by Wahlander - http://flic.kr/p/6UgrwM POPCORN TIME!
  56. 56. SELECTORS
  57. 57. h1 { color: red; font-size: 32px;} selector declaration block
  58. 58. h1 { color: red; font-size: 32px;} declaration selector declaration block
  59. 59. h1 { color: red; font-size: 32px;} declaration selector declaration block property value
  60. 60. h1 { color: red; font-size: 32px;} selector declaration block
  61. 61. IN THE BEGINNING, THERE WAS THE DOM
  62. 62. <!DOCTYPE HTML> <html> <head> <title>Show off the DOM!</title> </head> <body> <div id="content"> <p> Picture yourself on a boat in a river, with tangerine trees and marmalade skies. </p> </div> </body> </html>
  63. 63. HTML head body title div p
  64. 64. RELATIONSHIPS Ancestor/Descendant Parent/Child Sibling
  65. 65. HTML head body title div p ancestor descendant descendant descendant
  66. 66. HTML head body title div p ancestor descendant descendant child parent
  67. 67. HTML head body title div p siblingsibling
  68. 68. http://flic.kr/p/C3C52
  69. 69. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS
  70. 70. p.large p of class “large” SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS p type #nav any element with id “nav” .intro.large multiple classes IE6
  71. 71. div > p child SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS div p descendant h1 + p adjacent sibling IE6 IE6 *universal
  72. 72. img[alt=“foo”] <img alt=“foo” … > SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS img[alt] <img alt=“…anything…” … > img[alt~=“foo”] <img alt=“blah foo bar” … > img[alt|=“foo”] <img alt=“blah-foo-bar” … > IE6 IE6 IE6 IE6
  73. 73. img[alt^=“foo”] <img alt=“foobar” … > SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS img[alt$=“foo”] <img alt=“barfoo” … > img[alt*=“foo”] <img alt=“barfoobar” … > IE6 IE6 IE6 CSS 3
  74. 74. PSEUDO-CLASSES :first-child :link :visited :hover :active :focus :lang(foo) SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS IE6 - links only IE7 - links only IE8 IE8 - still not 100%
  75. 75. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS div>p:first-child <div> <p>yes!</p> <p>no</p> </div> IE8
  76. 76. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS :nth-child(formula) An+B: “Every A’th element starting from B” 3n: 0, 3, 6, 9… 3n+1: 1, 4, 7, 10… even (== 2n+1) odd (== 2n) CSS 3None of this works in IE < 9.
  77. 77. PSEUDO-ELEMENTS :first-line, :first-letter :before, :after SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS IE8 webkit, opera
  78. 78. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS li.optional:before li.optional:before { font-color: red; content: “optional - ” } <h1>Bring for hike:</h1> <ul> <li>hat</li> <li>water</li> <li class=“optional”>camera</li> </ul> Bring for hike: • hat • water • optional - camera IE8
  79. 79. SPECIFICITY style=“…” attribute in an element IDs attributes, classes, pseudo-classes elements, pseudo-elements Later rules of same specificity trump earlier rules http://www.w3.org/TR/CSS2/cascade.html#specificity
  80. 80. OMG WTF PPK quirksmode.org/css/contents.html
  81. 81. TYPOGRAPHY
  82. 82. Hamburgefonstiv Hamburgefonstiv Hamburgefonstiv
  83. 83. — the art and science of — presenting textual information
  84. 84. Web Design is 95% Typography http://informationarchitects.jp/the-web-is-all-about-typography-period/
  85. 85. http://flic.kr/p/6KcBR4 Gutenberg: 1436 574 years of tradition and best-practices.
  86. 86. The clothes in which you dress your words.
  87. 87. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Set “Solid” 1.3em
  88. 88. Lorem ipsum dolor sit M nibh euismod tincidunt 1 em 1.5 em Line height of 1.3-2.0 ems RULE THUMB of
  89. 89. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  90. 90. Measure: 2 alphabets RULE THUMB of abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  91. 91. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 12px 16px/1.3em
  92. 92. http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
  93. 93. Body Text: 16px RULE THUMB of 16px = 100% in most browsers http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
  94. 94. Dolphins Are Just Gay Sharks Jan 28th 2010 • 7:45 PM Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Tagged fake, news OMG PONIES BLOG
  95. 95. http://flic.kr/p/4Pdz2D My eyes, ze goggles do NOTHING!
  96. 96. 2-3 Typefaces, Maximum RULE THUMB of Sans-serif (ex. Helvetica) for titles Serif (ex. Georgia) for body text
  97. 97. typographyforlawyers.com webtypography.net read and obey.
  98. 98. Questions?
  99. 99. Thank you! @idangazit slides: http://db.tt/GfcttW0

×