CSS for Designers
-
Upload
idan-gazit -
Category
Documents
-
view
2.735 -
download
4
description
Transcript of CSS for Designers
![Page 1: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/1.jpg)
CSS— a talk about —
frontend development for designers
Idan Gazit • @idangazitHIT • 24th November 2010
![Page 2: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/2.jpg)
http://flic.kr/p/7TYgHL
![Page 3: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/3.jpg)
http://flic.kr/p/6TnQbA
I COME FROM AMERICAMy Hebrew sucks.
![Page 4: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/4.jpg)
don’t be afraid.deep but doable
![Page 6: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/6.jpg)
Photo by Yandle - http://flic.kr/p/4sfHWp
WIREFRAMES
![Page 7: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/7.jpg)
Photo by xiaming - http://flic.kr/p/JP3Xs
SEMANTIC MARKUP
![Page 8: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/8.jpg)
Photo by wwarby - http://flic.kr/p/3q3A3r
LOTS OF EFFORT
![Page 9: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/9.jpg)
especially IE6
![Page 10: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/10.jpg)
Tables
Flash
<img>
![Page 11: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/11.jpg)
Tables
Flash
<img>
unsemantic
unsemantic
unreadableiOS
![Page 12: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/12.jpg)
Tables
Flash
<img>
unsemantic
unsemantic
unreadableiOS
Future Proofing.
![Page 13: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/13.jpg)
Block vs. Inline
The Box Model
Positioning
Selectors
Typography and CSS
break!
![Page 14: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/14.jpg)
Markup
CSS
![Page 15: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/15.jpg)
BLOCK VS. INLINE
![Page 16: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/16.jpg)
Block Inline
![Page 17: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/17.jpg)
div
p
h1…h6
ul, ol, li
span
a
img
strong, em
Block Inline
![Page 18: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/18.jpg)
BLOCK100% width
height according to content
can contain both inline and block content
can control positioning
![Page 19: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/19.jpg)
BLOCKBlock 1
Block 2
Block 3
Block 4
Block 5
![Page 20: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/20.jpg)
INLINEheight according to content
width according to content
can contain content (and other inlines)
automatic position in flow
![Page 21: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/21.jpg)
INLINEBlock 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
Inline 1 Inline 2 Inline 3 Inline 4
![Page 22: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/22.jpg)
width
height
margin
padding
width
height
margin
padding
Block Inline
![Page 23: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/23.jpg)
width
height
margin
padding
width
height
margin
padding
Block Inline
![Page 24: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/24.jpg)
divp
h1…h6
ul, ol, li
spana
img
strong, em
Block Inline
![Page 25: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/25.jpg)
<div id=“article_header”>
![Page 26: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/26.jpg)
section
header, footer
article
nav
BlockHTML 5
![Page 27: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/27.jpg)
display: blockforce an element to be block-level
![Page 28: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/28.jpg)
THE BOX MODEL
![Page 29: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/29.jpg)
WTF?Doesn’t work the way you expect.
![Page 30: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/30.jpg)
![Page 31: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/31.jpg)
![Page 32: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/32.jpg)
HOW BIG AM I?div { width: 400px; height: 500px; padding: 10px; border: 1px solid black; margin: 20px;}
![Page 33: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/33.jpg)
HOW BIG AM I?
width: 400px +10 +10 +1 +1 = 422px
height: 500px +10 +10 +1 +1 = 522px
paddingleft + right
borderleft + right
paddingtop + bottom
bordertop + bottom
![Page 34: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/34.jpg)
![Page 35: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/35.jpg)
Mathsize + padding + border = actual size
![Page 36: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/36.jpg)
More Math“width: auto;” containing block width- margin- border- padding= content width.
![Page 37: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/37.jpg)
especially IE6
![Page 38: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/38.jpg)
POSITIONING
![Page 39: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/39.jpg)
position : Static;
Relative;
Absolute;
Fixed;
![Page 40: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/40.jpg)
STATICBlock 1
Block 2
Block 3
Block 4
Block 5
![Page 41: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/41.jpg)
RELATIVEBlock 1
Block 3
Block 4
Block 5
display: relativeleft: 50pxtop: 50px
![Page 42: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/42.jpg)
RELATIVEBlock 1
Block 3
Block 4
Block 5
display: relativeleft: -50pxtop: -50px
![Page 43: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/43.jpg)
RELATIVEBlock 1
Block 3
Block 4
Block 5
display: relative
![Page 44: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/44.jpg)
ABSOLUTEBlock 1
Block 3
Block 4
Block 5
Block 2position: absolute;left: 0;
![Page 45: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/45.jpg)
ABSOLUTEBlock 1
Block 3
Block 4
Block 5
Block 2position: absolute;right: 0; bottom:0;
![Page 46: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/46.jpg)
position: relative
ABSOLUTEBlock 1
Block 3
Block 4
Block 2position: absolute;right: 0; top: 100px;
![Page 47: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/47.jpg)
position: relative
ABSOLUTEBlock 1
Block 3
Block 4
Block 2position: absolute;right: 0; left: 0; bottom:0;
![Page 48: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/48.jpg)
position: relative
FIXEDBlock 1
Block 3
Block 4
Block 2position: fixed;right: 0; bottom:0;
![Page 49: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/49.jpg)
position: relative
FIXEDBlock 1
Block 3
Block 4
Block 2position: fixed;right: 0; left: 0; bottom:0;
![Page 50: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/50.jpg)
z-indexcontrol overlap
![Page 51: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/51.jpg)
![Page 52: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/52.jpg)
![Page 53: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/53.jpg)
floatsremove elements from flow
![Page 54: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/54.jpg)
position: relative
FLOATS
Block 1
Block 2
Block 3
Block 4
![Page 55: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/55.jpg)
position: relative
FLOATS
Block 1Block 2float: left;width: 200px;height: 300px;
Block 3
Block 4
![Page 56: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/56.jpg)
Margin Collapsingunintuitive
![Page 57: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/57.jpg)
MARGIN COLLAPSING
Block 1margin-bottom: 50px
Block 2margin-top: 30px
??px
![Page 58: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/58.jpg)
MARGIN COLLAPSING
Block 1margin-bottom: 50px
Block 2margin-top: 30px
50px
![Page 59: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/59.jpg)
W3Cwww.w3.org/TR/CSS2/box.html
![Page 60: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/60.jpg)
Photo by Wahlander - http://flic.kr/p/6UgrwM
POPCORN TIME!
![Page 61: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/61.jpg)
SELECTORS
![Page 62: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/62.jpg)
h1 { color: red; font-size: 32px;}
selector declaration block
![Page 63: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/63.jpg)
h1 { color: red; font-size: 32px;}declaration
selector declaration block
![Page 64: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/64.jpg)
h1 { color: red; font-size: 32px;}declaration
selector declaration block
property value
![Page 65: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/65.jpg)
h1 { color: red; font-size: 32px;}
selector declaration block
![Page 66: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/66.jpg)
IN THE BEGINNING,THERE WAS THE DOM
![Page 67: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/67.jpg)
<!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>
![Page 68: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/68.jpg)
HTML
head body
title div
p
![Page 69: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/69.jpg)
RELATIONSHIPS
Ancestor/Descendant
Parent/Child
Sibling
![Page 70: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/70.jpg)
HTML
head body
title div
p
ancestor
descendant
descendant
descendant
![Page 71: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/71.jpg)
HTML
head body
title div
p
ancestor
descendant
descendant
child
parent
![Page 72: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/72.jpg)
HTML
head body
title div
p
siblingsibling
![Page 74: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/74.jpg)
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
![Page 75: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/75.jpg)
p.largep of class “large”
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
ptype
#navany element with id “nav”
.intro.largemultiple classes
IE6
![Page 76: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/76.jpg)
div > pchild
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS div pdescendant
h1 + padjacent sibling
IE6
IE6
*universal
![Page 77: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/77.jpg)
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
![Page 78: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/78.jpg)
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
![Page 79: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/79.jpg)
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%
![Page 80: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/80.jpg)
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
div>p:first-child<div> <p>yes!</p> <p>no</p></div>
IE8
![Page 81: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/81.jpg)
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.
![Page 82: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/82.jpg)
PSEUDO-ELEMENTS
:first-line, :first-letter
:before, :after
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
IE8
webkit, opera
![Page 83: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/83.jpg)
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
li.optional:beforeli.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
![Page 84: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/84.jpg)
SPECIFICITYstyle=“…” attribute in an element
IDs
attributes, classes, pseudo-classes
elements, pseudo-elements
Later rules of same specificity trump earlier ruleshttp://www.w3.org/TR/CSS2/cascade.html#specificity
![Page 85: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/85.jpg)
OMG WTF PPKquirksmode.org/css/contents.html
![Page 86: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/86.jpg)
TYPOGRAPHY
![Page 87: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/87.jpg)
Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
![Page 88: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/88.jpg)
— t h e a r t a n d s c i e n c e o f —
presenting textual information
![Page 89: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/89.jpg)
Web Design is 95% Typographyhttp://informationarchitects.jp/the-web-is-all-about-typography-period/
![Page 90: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/90.jpg)
http://flic.kr/p/6KcBR4
Gutenberg: 1436574 years of tradition and best-practices.
![Page 91: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/91.jpg)
The clothes in whichyou dress your words.
![Page 92: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/92.jpg)
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
![Page 93: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/93.jpg)
Lorem ipsum dolor sit Mnibh euismod tincidunt
1 em
1.5 em
Line height of 1.3-2.0 ems
RULE
THUMBof
![Page 94: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/94.jpg)
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.
![Page 95: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/95.jpg)
Measure: 2 alphabets
RULE
THUMBof
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
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.
![Page 96: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/96.jpg)
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
![Page 97: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/97.jpg)
http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
![Page 98: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/98.jpg)
Body Text: 16px
RULE
THUMBof
16px = 100% in most browsers
http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
![Page 99: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/99.jpg)
Dolphins Are Just Gay SharksJan 28th 2010 • 7:45 PMLorem 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
![Page 100: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/100.jpg)
http://flic.kr/p/4Pdz2D
My eyes, ze goggles do NOTHING!
![Page 101: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/101.jpg)
2-3 Typefaces, Maximum
RULE
THUMBof
Sans-serif (ex. Helvetica) for titlesSerif (ex. Georgia) for body text
![Page 102: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/102.jpg)
typographyforlawyers.comwebtypography.net
read and obey.
![Page 103: CSS for Designers](https://reader030.fdocuments.net/reader030/viewer/2022020718/5565b286d8b42a4c6f8b4e78/html5/thumbnails/103.jpg)
Questions?