1. HARDCORE CSS Eric Redmond
@coderoshi
PDX Web & Design

2. A SHORT HISTORY OF Hardcore
CSS
CSS

3. CSS
Cascading Style Sheets A SHORT
Separates style from HISTORY
OF CSS
substance
 (separate from HTML)
Stylesheets non-standard
In 1990 TBL separated docs
from layout
Each browser decided doc style

4. Cascading HTML style
sheets – a proposal A SHORT
Oct 10, 1994 HISTORY
OF CSS
Håkon W Lie (CERN) proposes

5. Cascading HTML style
sheets – a proposal A SHORT
Oct 10, 1994 HISTORY
OF CSS
Håkon W Lie (CERN) proposes

6. Cascading HTML style sheets
– a proposal
Oct 10, 1994 A SHORT
Håkon Lie (CERN) HISTORY
OF CSS
Bert Bos was first adoptor
Cascading?
An ordered list of stylesheets,
that start with the first, and
values are added/overridden by
later SS
1995-1996
Netscape, IE and others added
support
CSS Level I emerged from W3C
draft in Dec 1996

7. CSS2
1998 Level 2 was proposed A SHORT
Adoption was relatively fast HISTORY
OF CSS
CSS3
First draft published in 1999
Divided into 50 modules
Still being fucking written
Sllloooowwww adoption…
CSS4
Started in 2009
Not support at all

8. Hardcore
SELECTORS CSS

9. Universal
Elements
Classes SELECTORS
IDs
Attributes
Pseudo classes
Pseudo elements

10. <em>I’m Arial too!</em>
*{
SELECTORS
font-family: Arial; U n i v e r s al
}

11. <strong>
hulk smash
</strong>
SELECTORS
Elements
strong {
color: green;
text-transform:uppercase;
}

12. <span class=superhero>
Iron Man
</span>
SELECTORS
Classes
.superhero {
font-family: 'International Super Hero' ;
}

13. <div id=main>
My main content.
</div>
SELECTORS
IDs
#main {
border:1px solid green;
padding:1em;
}

14. <article role=main>
My main content.
</article>
SELECTORS
IDs
[role=main] {
border:1px solid green;
padding:1em;
}

15. <ul>
<li>Item 1</li>
<li>Item 2</li>
SELECTORS
</ul> Pseudo Classes
li:first-child {
color:red;
}

16. <h1>
Excelsior
</h1>
SELECTORS
Pseudo
Elements
h1:after {
content: '!';
}

17. <h1>Page Title<h1>
<section>
<h1>Section Title</h1>
SELECTORS
</section> Nesting
section h1 {
color:blue;
}

18. <h1>Page Title<h1>
<section>
<h1>Section Title</h1>
SELECTORS
</section> Nesting
section h1 {
color:blue;
}

19. Hardcore
SPECIFICITY CSS

20. <section id=person>
<div id=name>Joe</div>
<div>A nice guy</div> SELECTOR
SPECIFICIT Y
</section> What wins?
#person div {
color:red;
}
#name {
color:blue;
}

21. SELECTOR
SPECIFICIT Y

22. SELECTOR
…What? SPECIFICIT Y

23. SELECTOR SPECIFICIT Y
www.w3.org/TR/css3-selectors/#specificity
Calculating a selector's specificity
 count the number of ID selectors in the selector (= a)
 count the number of class selectors, attributes selectors, and
pseudo-classes in the selector (= b)
 count the number of type selectors and pseudo-elements in the
selector (= c)
 ignore the universal selector

24. CALCULATION
Selector a b c Specificity
* 0 0 0 0
li 0 0 1 1
ul li 0 0 2 2
ul li:after 0 0 3 3
h1 *[rel=up] 0 1 1 11
ul li span.red 0 1 3 13
li.red.level 0 2 1 21
#name 1 0 0 100
#person div 1 0 1 101

25. EASIER WAY
I.C.A.T.
 IDs > Classes/Attributes > Types
 Pseudos are of their kind
 Pseudo-classes are classes
 Pseudo-elements are elements (types)

26. EASIER WAY
1. Compare the count of IDs
 div#content *[role=main] section#person = 2
 section#person div#name .superhero:last = 2
2. Compare the count of Classes+Attributes
 div#content *[role=main] section#person = 1
 section#person div#name .superhero:last = 1
3. Compare the count of Types
 div#content *[role=main] section#person = 2
 section#person div#name .superhero:last = 3

27. Hardcore
ADVANCED(ISH) DETAILS CSS

28. The Box Model
THE BOX
MODEL

29. More Box Model
THE BOX
MODEL

30. [attr] – attr exists
[attr=val] – value equals
ATTRIBUTE
[attr~=val] – exists in MATCHING
whitespace set
[attr|=val] – value followed by
a dash
[attr^=val] – value begins with
[attr$=val] – value ends with
[attr*=val] – value contains

31. :nth-child(N)
:nth-last-child(N)
PSEUDO
:nth-of-type(N) CLASSES
:first-child
:last-child
:empty
:target
:enabled
:disabled
:not(S)

32. Hardcore
CSS3 FUN THINGS CSS

33. Fonts
Typekit
Google Fonts
FontSquirrel
Baby Typography
Tracking (not Kerning)
Leading
Shadows

34. Boxes
Border types
Border Radius
Outline
Box Shadow
box-shadow:
6px 6px 6px 6px #666;
[right] [down] [blur] [width] #[color];

35. Backgrounds
Gradients
 lea.verou.me/demos/cssgradient
splease
Patterns
 lea.verou.me/css3patterns
background-image:
-webkit-linear-gradient(
bottom,
rgb(4,4,133) 15%,
rgb(40,66,171) 58%
);

36. Transforms
Most browsers require a prefix
-o-transform: …;
-ms-transform: …;
-moz-transform: …;
-webkit-transform: …;

37. Rotate
transform: rotate(20deg);
Scale
transform: scale(2, 2);

38. Transitions
Best in reaction to something!
Timing
Easing

39. Hardcore
MEDIA CSS

40. MEDIA T YPES
Media Type Description
all All media type devices
aural Speech and sound synthesizers
braille Braille tactile feedback devices
embosses Paged braille printers
handheld Small or handheld devices
print Printers
projection Projected presentations, like slides
screen Computer screens (and mobile screens)
tty Media using a fixed-pitch character grid, like terminals
tv Television-type devices

41. External Media Attribute
<link
rel="stylesheet”
media="print" MEDIA
href="printer.css" />
Inline Media Rule
@media print {
body {
color:black;
}
}

42. Hardcore
(BEST?) PRACTICES CSS

43. Problem:
Browsers still have different
default behaviors BEST
PRACTICES
Solution:
Reset CSS

44. *{
vertical-align: baseline;
font-weight: inherit; BEST
PRACTICES
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}

45. yui.yahooapis.com/3.5.1
/build/cssreset
/cssreset.css

46. Problem:
Some Browsers
(*cough*IE*cough*) do not BEST
recognize HTML5 elements PRACTICES
(Best?)
Solution: P r a c t i ce s
Modernizr

47. Problem:
Some browsers pre
implemented CSS3 BEST
PRACTICES
Solution: (Best?)
P r a c t i ce s
Know the prefixes
 -o- = Opera
 -moz- = Mozilla (Firefox)
 -webkit- = Webkit (Chrome,
Safari, iOS)

48. Problem:
EMs are inconsistent
Solution: BEST
PRACTICES
Set font size to 10px (Best?)
P r a c t i ce s
html, body {
font-size:10px;
}

49. Hardcore
LAYOUTS CSS

50. Classic floats
One True Layout
 positioniseverything.net/articles/
onetruelayout LAYOUTS
Floats
The Holy Grail
 alistapart.com/articles/holygrail

51. Multicolumns
LAYOUTS
CSS3
M u l t ic o l umn s

52. Display Box
LAYOUTS
C S S 3 D i s p l ay
B ox

53. Elastic
LAYOUTS
Elastic

54. Fluid
LAYOUTS
Fluid

55. Responsive
Just change layout using
media queries
LAYOUTS
Re s p o n s i ve
@media only screen and
(max-device-width: 480px) {
body {
font-size:10px;
}
}

56. Summer Social & Lightning Talks
PDX W&D UPCOMING
Thursday, Aug 9
Webtrends (that would be here)
Rails Girls PDX
September 7-8
Signup at RailsGirls.com (ladies only)