css for designers
DESCRIPTION
An overview of key CSS concepts that are often misunderstood. These are things I wish somebody had sat me down and explained when I was just getting started.Slides from a lecture given to 3rd-year interactive design students at the Holon Institute of Technology (IsraelI)TRANSCRIPT
CSS— a talk about —
frontend development for designers
Idan Gazit • @idangazitHIT • 24th November 2010
http://flic.kr/p/7TYgHL
http://flic.kr/p/6TnQbA
I COME FROM AMERICAMy Hebrew sucks.
don’t be afraid.deep but doable
Photo by Yandle - http://flic.kr/p/4sfHWp
WIREFRAMES
Photo by xiaming - http://flic.kr/p/JP3Xs
SEMANTIC MARKUP
Photo by wwarby - http://flic.kr/p/3q3A3r
LOTS OF EFFORT
especially IE6
Tables
Flash
<img>
Tables
Flash
<img>
unsemantic
unsemantic
unreadableiOS
Tables
Flash
<img>
unsemantic
unsemantic
unreadableiOS
Future Proofing.
Block vs. Inline
The Box Model
Positioning
Selectors
Typography and CSS
break!
Markup
CSS
BLOCK VS. INLINE
Block Inline
div
p
h1…h6
ul, ol, li
span
a
img
strong, em
Block Inline
BLOCK100% width
height according to content
can contain both inline and block content
can control positioning
BLOCKBlock 1
Block 2
Block 3
Block 4
Block 5
INLINEheight according to content
width according to content
can contain content (and other inlines)
automatic position in flow
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
width
height
margin
padding
width
height
margin
padding
Block Inline
width
height
margin
padding
width
height
margin
padding
Block Inline
divp
h1…h6
ul, ol, li
spana
img
strong, em
Block Inline
<div id=“article_header”>
section
header, footer
article
nav
BlockHTML 5
display: blockforce an element to be block-level
THE BOX MODEL
WTF?Doesn’t work the way you expect.
HOW BIG AM I?div { width: 400px; height: 500px; padding: 10px; border: 1px solid black; margin: 20px;}
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
Mathsize + padding + border = actual size
More Math“width: auto;” containing block width- margin- border- padding= content width.
especially IE6
POSITIONING
position : Static;
Relative;
Absolute;
Fixed;
STATICBlock 1
Block 2
Block 3
Block 4
Block 5
RELATIVEBlock 1
Block 3
Block 4
Block 5
display: relativeleft: 50pxtop: 50px
RELATIVEBlock 1
Block 3
Block 4
Block 5
display: relativeleft: -50pxtop: -50px
RELATIVEBlock 1
Block 3
Block 4
Block 5
display: relative
ABSOLUTEBlock 1
Block 3
Block 4
Block 5
Block 2position: absolute;left: 0;
ABSOLUTEBlock 1
Block 3
Block 4
Block 5
Block 2position: absolute;right: 0; bottom:0;
position: relative
ABSOLUTEBlock 1
Block 3
Block 4
Block 2position: absolute;right: 0; top: 100px;
position: relative
ABSOLUTEBlock 1
Block 3
Block 4
Block 2position: absolute;right: 0; left: 0; bottom:0;
position: relative
FIXEDBlock 1
Block 3
Block 4
Block 2position: fixed;right: 0; bottom:0;
position: relative
FIXEDBlock 1
Block 3
Block 4
Block 2position: fixed;right: 0; left: 0; bottom:0;
z-indexcontrol overlap
floatsremove elements from flow
position: relative
FLOATS
Block 1
Block 2
Block 3
Block 4
position: relative
FLOATS
Block 1Block 2float: left;width: 200px;height: 300px;
Block 3
Block 4
Margin Collapsingunintuitive
MARGIN COLLAPSING
Block 1margin-bottom: 50px
Block 2margin-top: 30px
??px
MARGIN COLLAPSING
Block 1margin-bottom: 50px
Block 2margin-top: 30px
50px
W3Cwww.w3.org/TR/CSS2/box.html
Photo by Wahlander - http://flic.kr/p/6UgrwM
POPCORN TIME!
SELECTORS
h1 { color: red; font-size: 32px;}
selector declaration block
h1 { color: red; font-size: 32px;}declaration
selector declaration block
h1 { color: red; font-size: 32px;}declaration
selector declaration block
property value
h1 { color: red; font-size: 32px;}
selector declaration block
IN THE BEGINNING,THERE WAS THE DOM
<!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>
HTML
head body
title div
p
RELATIONSHIPS
Ancestor/Descendant
Parent/Child
Sibling
HTML
head body
title div
p
ancestor
descendant
descendant
descendant
HTML
head body
title div
p
ancestor
descendant
descendant
child
parent
HTML
head body
title div
p
siblingsibling
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
p.largep of class “large”
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
ptype
#navany element with id “nav”
.intro.largemultiple classes
IE6
div > pchild
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS div pdescendant
h1 + padjacent sibling
IE6
IE6
*universal
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
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
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%
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
div>p:first-child<div> <p>yes!</p> <p>no</p></div>
IE8
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.
PSEUDO-ELEMENTS
:first-line, :first-letter
:before, :after
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
IE8
webkit, opera
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
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
OMG WTF PPKquirksmode.org/css/contents.html
TYPOGRAPHY
Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
— t h e a r t a n d s c i e n c e o f —
presenting textual information
Web Design is 95% Typographyhttp://informationarchitects.jp/the-web-is-all-about-typography-period/
http://flic.kr/p/6KcBR4
Gutenberg: 1436574 years of tradition and best-practices.
The clothes in whichyou dress your words.
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
Lorem ipsum dolor sit Mnibh euismod tincidunt
1 em
1.5 em
Line height of 1.3-2.0 ems
RULE
THUMBof
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.
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.
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
http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
Body Text: 16px
RULE
THUMBof
16px = 100% in most browsers
http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
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
http://flic.kr/p/4Pdz2D
My eyes, ze goggles do NOTHING!
2-3 Typefaces, Maximum
RULE
THUMBof
Sans-serif (ex. Helvetica) for titlesSerif (ex. Georgia) for body text
typographyforlawyers.comwebtypography.net
read and obey.
Questions?
