Save 37% off PRO during our Black Friday Sale! »

Full day workshop: For a beautiful web

433acaea1012b25d97ae66da9b998dad?s=47 Andy Clarke
November 20, 2007

Full day workshop: For a beautiful web

Workshop originally presented by Andy Clarke during 2007–2008

433acaea1012b25d97ae66da9b998dad?s=128

Andy Clarke

November 20, 2007
Tweet

Transcript

  1. Workshop originally presented by Andy Clarke during 2007–2008 For a

    beautiful web Andy Clarke is a digital designer, speaker, and writer whose designs have helped companies around the world to increase their sales pipeline and revenue, and charities to increase donations. He founded Stuff & Nonsense and has consulted and designed for clients including Disney Store UK, Fairfax Media, Home Office (UK), Greenpeace, ISO, SAP, STV, SunLife, WIPO, and WWF. He works on creative website and digital product designs and provides ongoing creative direction. He coaches agencies and mentors designers on dealing with clients, and delivering creative projects. If you’re looking to design better digital products and websites, develop a design system or style guide, or want to understand how design can help your business, you should talk to him. Stuff & Nonsense Ltd. Eversleigh, Lon Capel, Gwaenysgor, Flintshire, LL18 6EJ, UK For work enquiries go to stuffandnonsense.co.uk or call +44 (0)1745 851848
  2. TRANSCENDING
CSS
 ‘FOR
A
BEAUTIFUL
WEB’ WORKSHOP
SERIES
2007‐8

  3. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE WELCOME

  4. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE TRANSCENDING
CSS The
Fine
Art
Of
Web
Design by
Andy
Clarke Published
by
New
Riders
2006

  5. None
  6. None
  7. None
  8. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE “
We've
arrived
at
a
situation
where
beautiful
sites
with
 beautiful
code
are
being
produced
by
the
hundreds;
every
 month,
every
week,
every
day.
It's
no
longer
a
myth
that
 you
can
produce
a
stunning
site
with
Web
Standards.” CAMERON
ADAMS WEBSTANDARDSAWARDS.COM W E

    B 
 S TA N D A R D S 
 A W A R D S
  9. THEINVASIONMOVIE.WARNERBROS.COM

  10. KYLIEMINOGUE.UK.COM

  11. NIKE.COM

  12. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE TRANSCENDENT
CSS

  13. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE ‐ Not
all
browsers
see
the
same
design ‐ Use
all
available
CSS
selectors ‐ Use
CSS3
where
appropriate ‐ Use
JavaScript
and
the
DOM
to
plug
holes
in
CSS

    ‐ Use
semantic
naming
and
Microformats P R I N C I P L E S 
 O F 
 T R A N S C E N D E N T 
 C S S
  14. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE ‐ Not
all
browsers
see
the
same
design ‐ Use
all
available
CSS
selectors ‐ Use
CSS3
where
appropriate ‐ Use
JavaScript
and
the
DOM
to
plug
holes
in
CSS

    ‐ Use
semantic
naming
and
Microformats P R I N C I P L E S 
 O F 
 T R A N S C E N D E N T 
 C S S
  15. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE ‐ Not
all
browsers
see
the
same
design ‐ Use
all
available
CSS
selectors ‐ Use
CSS3
where
appropriate ‐ Use
JavaScript
and
the
DOM
to
plug
holes
in
CSS

    ‐ Use
semantic
naming
and
Microformats P R I N C I P L E S 
 O F 
 T R A N S C E N D E N T 
 C S S
  16. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE ‐ Not
all
browsers
see
the
same
design ‐ Use
all
available
CSS
selectors ‐ Use
CSS3
where
appropriate ‐ Use
JavaScript
and
the
DOM
to
plug
holes
in
CSS

    ‐ Use
semantic
naming
and
Microformats P R I N C I P L E S 
 O F 
 T R A N S C E N D E N T 
 C S S
  17. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE ‐ Not
all
browsers
see
the
same
design ‐ Use
all
available
CSS
selectors ‐ Use
CSS3
where
appropriate ‐ Use
JavaScript
and
the
DOM
to
plug
holes
in
CSS

    ‐ Use
semantic
naming
and
Microformats P R I N C I P L E S 
 O F 
 T R A N S C E N D E N T 
 C S S
  18. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE NOT
ALL
BROWSERS
 SEE
THE
SAME
DESIGN

  19. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE “MOSe
Enhancement:
The
key
to
the
MOSe
method
is
 somewhat
similar
to
how
NN4
page
design
developed
as
 CSS
became
more
prevalent.
After
creating
a
basic,
 functioning
page
in
IE,
you
add
extra
functionality
with
 these
selectors.” DAVE
SHEA MEZZOBLUE.COM/ARCHIVES/2003/06/25/MOSE/ P

    R O G R E S S I V E 
 E N H A N C E M E N T
  20. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE “Progressive
enhancement
is
an
approach
to
web
design
 that
builds
documents
for
the
least
capable
devices
first,
 then
moves
on
to
enhance
those
documents
with
 separate
logic
for
presentation,
in
ways
that
do
not
place
 an
undue
burden
on
baseline
devices
but
which
allow
a
 richer
experience
for
those
users
with
modern
graphical
 browser
software.” STEVEN
CHAMPEON

    HESKETH.COM/PUBLICATIONS/INCLUSIVE_WEB_DESIGN_FOR_THE_FUTURE/ P R O G R E S S I V E 
 E N H A N C E M E N T
  21. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE “Progressive
enhancement
is
an
approach
to
web
design
 that
builds
documents
for
the
least
capable
devices
first,
 then
moves
on
to
enhance
those
documents
with
 separate
logic
for
presentation,
in
ways
that
do
not
place
 an
undue
burden
on
baseline
devices
but
which
allow
a
 richer
experience
for
those
users
with
modern
graphical
 browser
software.” STEVEN
CHAMPEON

    HESKETH.COM/PUBLICATIONS/INCLUSIVE_WEB_DESIGN_FOR_THE_FUTURE/ P R O G R E S S I V E 
 E N H A N C E M E N T
  22. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE P R O G R E S S

    I V E 
 E N H A N C E M E N T Applying
progressive
enhancement
across
technologies: ‐ CSS
for
visual
styling ‐ JavaScript
and
the
DOM
for
behavior ‐ AJAX
and
related
sets
of
technologies
  23. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE P R O G R E S S

    I V E 
 E N H A N C E M E N T Applying
progressive
enhancement
across
technologies: ‐ CSS
for
visual
styling ‐ JavaScript
and
the
DOM
for
behavior ‐ AJAX
and
related
sets
of
technologies
  24. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE P R O G R E S S

    I V E 
 E N H A N C E M E N T Applying
progressive
enhancement
across
technologies: ‐ CSS
for
visual
styling ‐ JavaScript
and
the
DOM
for
behavior ‐ AJAX
and
related
sets
of
technologies
  25. CSSZENGARDEN.COM
DESIGN
BY
MIKE
DAVIDSON

  26. CSSZENGARDEN.COM
DESIGN
BY
EGOR
KLOOS

  27. CSSZENGARDEN.COM
DESIGN
BY
SHAUN
INMAN

  28. None
  29. None
  30. None
  31. None
  32. DEVELOPER.YAHOO.COM/YUI/ARTICLES/GBS/

  33. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE G R A D E D 
 B

    R O W S E R 
 S U P P O R T “Support
does
not
mean
that
everybody
gets
the
same
 thing.
Expecting
two
users
using
different
browser
 software
to
have
an
identical
experience
fails
to
embrace
 or
acknowledge
the
heterogeneous
essence
of
the
web.” NATE
KOECHLEY DEVELOPER.YAHOO.COM/YUI/ARTICLES/GBS/GBS.HTML
  34. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE “Sony
is
a
registered
trademark
of
Sony
Corporation,
Japan”

  35. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE “Image
courtesy
of
Apple
Inc.”

  36. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE

  37. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE CONTENT‐OUT MARKUP

  38. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE “Some
people
say
I've
ruined
the
Web,
and
to
them
it's
 true.
[...]
I
ruined
the
Web
by
mixing
chocolate
and
 peanut
butter
so
they
could
never
become
unmixed.
I
 committed
the
hangable
offense
of
mixing
structure
with
 presentation.” DAVID
SIEGAL XML.COM/PUB/A/W3J/S1.PEOPLE.HTML P

    R E S E N TAT I O N A L 
 M A R K U P
  39. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE M E A N I N G F

    U L 
 M A R K U P <hx>
=
heading <p>
=
paragraph <ul>
=
unordered
list <ol>
=
ordered
list <dl>
=
definition
list
(name/value
pairs) <blockquote>
=
block
quotation
  40. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE F O R G O T T E

    N 
 H T M L 
 E L E M E N T S <del>
=
deleted
text <ins>
=
inserted
text <kbd>
=
computer
or
programming
related <q>
=
inline
quotations
 <cite>
=
citation
URLs
  41. None
  42. None
  43. <div> <div> <div> <div>

  44. None
  45. <ul> <li> <h3> <p> <img> <div>

  46. None
  47. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE

  48. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE <h1> <h2> <ul>

  49. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE

  50. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE <h1> <h2> <ul> <h3> <ol> <h3> <ol> <ul>

  51. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE

  52. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE <h1> <vevent> <p> <div>

  53. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE MICROFORMATS “We
need
more
microformats.” Bill
Gates
in
an
interview
with
Tim
O’Reilly
at
MIX06,
Las
Vegas

  54. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE “Designed
for
humans
first
and
machines
second,
 microformats
are
a
set
of
simple,
open
data
formats
built
 upon
existing
and
widely
adopted
standards.” MICROFORMATS.ORG/ABOUT W H AT 


    A R E 
 M I C R O F O R M AT S ?
  55. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE S E M A N T I C

    
 W E B ‐ Semantics
for
machines
first,
people
second ‐ Access
to
multiple
sources
and
global
sharing
of
data ‐ RDF
(Resource
Description
Format)
 ‐ OWL
(Web
Ontology
Language) ‐ Implementations,
applications
and
user
agents
are
years
away
 ‐ Relies
on
emerging
technologies
  56. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE ‐ Solve
a
specific
problem ‐ A
low
barrier
to
entry ‐ Design
for
humans
first,
machines
second ‐ Reuse
building
blocks
from
existing
standards

    ‐ Are
modular
and
embeddable ‐ Encourage
decentralised
content
and
services P R I N C I P L E S 
 O F 
 M I C R O F O R M AT S
  57. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE H C A R D For
marking
up
contact
information
for
people
and
 organisations H

    C A L E N D A R For
marking
up
information
about
events
such
as
 meetings,
conferences
and
concerts H R E V I E W For
marking
up
reviews
including
products
and
events
 W H AT 
 A R E 
 M I C R O F O R M AT S ?
  58. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE H C A R D For
marking
up
contact
information
for
people
and
 organisations H

    C A L E N D A R For
marking
up
information
about
events
such
as
 meetings,
conferences
and
concerts H R E V I E W For
marking
up
reviews
including
products
and
events
 W H AT 
 A R E 
 M I C R O F O R M AT S ?
  59. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE H C A R D For
marking
up
contact
information
for
people
and
 organisations H

    C A L E N D A R For
marking
up
information
about
events
such
as
 meetings,
conferences
and
concerts H R E V I E W For
marking
up
reviews
including
products
and
events
 W H AT 
 A R E 
 M I C R O F O R M AT S ?
  60. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE P U B L I S H E

    R S 
 U S I N G 
 M I C R O F O R M AT S C O R K D 
 (corkd.com) Publishes
wine
reviews
using
hReview,
profiles
using
 hCard
and
relationships
using
XFN F L I C K R 
 (flickr.com) Geotagging
of
photos,
publishes
profiles
using
hCard L A S T. F M 
 (last.fm) Publishes
concert
information
using
hCalendar U P C O M I N G 
 (upcoming.org) Publishes
event
information
using
hCalendar
and
 profiles
using
hCard
  61. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE P U B L I S H E

    R S 
 U S I N G 
 M I C R O F O R M AT S C O R K D 
 (corkd.com) Publishes
wine
reviews
using
hReview,
profiles
using
 hCard
and
relationships
using
XFN F L I C K R 
 (flickr.com) Geotagging
of
photos,
publishes
profiles
using
hCard L A S T. F M 
 (last.fm) Publishes
concert
information
using
hCalendar U P C O M I N G 
 (upcoming.org) Publishes
event
information
using
hCalendar
and
 profiles
using
hCard
  62. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE P U B L I S H E

    R S 
 U S I N G 
 M I C R O F O R M AT S C O R K D 
 (corkd.com) Publishes
wine
reviews
using
hReview,
profiles
using
 hCard
and
relationships
using
XFN F L I C K R 
 (flickr.com) Geotagging
of
photos,
publishes
profiles
using
hCard L A S T. F M 
 (last.fm) Publishes
concert
information
using
hCalendar U P C O M I N G 
 (upcoming.org) Publishes
event
information
using
hCalendar
and
 profiles
using
hCard
  63. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE P U B L I S H E

    R S 
 U S I N G 
 M I C R O F O R M AT S C O R K D 
 (corkd.com) Publishes
wine
reviews
using
hReview,
profiles
using
 hCard
and
relationships
using
XFN F L I C K R 
 (flickr.com) Geotagging
of
photos,
publishes
profiles
using
hCard L A S T. F M 
 (last.fm) Publishes
concert
information
using
hCalendar U P C O M I N G 
 (upcoming.org) Publishes
event
information
using
hCalendar
and
 profiles
using
hCard
  64. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE hCARD

  65. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE Malarkey's
a
Modern
kinda
guy
who
loves
 to
annoy
his
neighbours
in
Gwaenysgor
 with
his
collection
of
sixties
Mod
and
 ska
classics.
When
he's
not
polishing
the
 mirrors
on
his
scooter,
he
dreams
of
 having
Paul
Weller
'round
for
tea.
Since
 signing
to
Stuff
and
Nonsense
Records,
 Malarkey
can
be
reached
by
email
or
by


    phone
on
+44
(0)1745
851848. M I C R O F O R M AT S : 
 H C A R D
  66. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE Malarkey's
a
Modern
kinda
guy
who
loves
 to
annoy
his
neighbours
in
Gwaenysgor
 with
his
collection
of
sixties
Mod
and
 ska
classics.
When
he's
not
polishing
the
 mirrors
on
his
scooter,
he
dreams
of
 having
Paul
Weller
'round
for
tea.
Since
 signing
to
Stuff
and
Nonsense
Records,
 Malarkey
can
be
reached
by
email
or
by


    phone
on
+44
(0)1745
851848. M I C R O F O R M AT S : 
 H C A R D
  67. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE BEGIN:VCARD FN:Andy
Clarke. ORG:Stuff
and
Nonsense
Records; ADR: Gwaenysgor; Flintshire; LL18
6EP; TEL:(0)1745
851848

    EMAIL:malarkey@thenonsenserobots.com END:VCARD M I C R O F O R M AT S : 
 V C A R D
  68. M I C R O F O R M AT

    S : 
 V C A R D A
vCard
in
Apple’s
Address
Book
application
  69. <div
class="vcard"> <span
class="fn">Andy
Clarke</span> <span
class="org">Stuff
and
Nonsense
Records</span> <span
class="adr"> <span
class="locality">Gwaenysgor,
</span> <span
class="region">Flintshire,
</span> <span
class="postal‐code">LL18
6EP</span> </span> <span
class="tel">+44
(0)1745
851848</span> <a
class="email"
href="#">Email
Malarkey</a>

    </div> M I C R O F O R M AT S : 
 H C A R D
  70. M I C R O F O R M AT

    S : 
 H C A R D <p
class="vcard"> <span
class="fn">Malarkey</span>'s
a
Modern
kinda
guy
 who
loves
to
annoy
his
neighbours
in
 <span
class="locality">Gwaenysgor</span>
with
his
 collection
of
sixties
Mod
and
ska
classics.
Since
 signing
to
<span
class="org">Stuff
and
Nonsense
 Records</span>,
Malarkey
can
be
reached
by
 <a
class="email"
href="#">email</a>
or
by
phone
on
 <span
class="tel">+44
(0)1745
851848</span>. </p>
  71. None
  72. <ul> <li> <h3> <p> <img> <div>

  73. <ul> <li
id="colly"
class="vcard"></li> <li
id="dan"
class="vcard"></li> <li
id="jina"
class="vcard"></li> <li
id="malarkey"
class="vcard"></li> </ul> M I C R

    O F O R M AT S : 
 H C A R D
  74. <li
id="colly"
class="vcard"> <h3><span
class="fn">Colly
Wobbles</span></h3> <a
href="#colly"><img
src="colly.jpg"
alt=""
class="photo"
/></a> <p
class="summary">Colly
Wobbles...</p> <div> <span
class="org">c/o
Stuff
and
Nonsense
Records</span> <span
class="adr"> <span
class="locality">Gwaenysgor,
</span> <span
class="region">Flintshire,
</span> <span
class="postal‐code">LL18
6EP</span>

    </span> <span
class="tel">+44
(0)1745
851848</span> <a
class="email"
href="#">Email
Colly</a> </div> </li> M I C R O F O R M AT S : 
 H C A R D
  75. None
  76. None
  77. None
  78. <li
id="colly"
class="vcard"> <h3><span
class="fn">Colly
Wobbles</span></h3> <a
href="#colly"><img
src="colly.jpg"
alt=""
class="photo"
/></a> <img
src="logo_colly.png"
alt=""
class="logo"
/> <div> <span
class="org">c/o
Stuff
and
Nonsense
Records</span> <span
class="adr"> <span
class="locality">Gwaenysgor,
</span> <span
class="region">Flintshire,
</span> <span
class="postal‐code">LL18
6EP</span>

    </span> <span
class="tel">+44
(0)1745
851848</span> <a
class="email"
href="#">Email
Colly</a> </div> </li> M I C R O F O R M AT S : 
 H C A R D
  79. None
  80. None
  81. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE hCALENDAR

  82. None
  83. <div
id="content"
class="vcalendar"> <div
class="vevent"> <p
class="summary"> <span
class="location"> <abbr
title="Manchester
Evening
News
Arena">MEN
Arena</abbr>,
 <abbr>UK</abbr></span>
on
<abbr
title="20070901T20:00"
 class="dtstart">September
1st
2007</abbr></p> </div> </div> M

    I C R O F O R M AT S : 
 H C A L E N D A R
  84. <div
id="content"
class="vcalendar"> <div
class="vevent"> <p
class="summary"> <span
class="location"> <abbr
title="Manchester
Evening
News
Arena">MEN
Arena</abbr>,
 <abbr>UK</abbr></span>
on
<abbr
title="20070901T20:00"
 class="dtstart">September
1st
2007</abbr></p> <div
class="vcard
contact"> <span
class="fn
org">MEN
Arena
Manchester
Box
Office</span> </div>

    </div> </div> M I C R O F O R M AT S : 
 H C A L E N D A R
  85. <div
class="vcard
contact"> <h3>Tickets
available
from</h3> <span
class="fn
org">MEN
Arena
Manchester
Box
Office</span> <span
class="adr"> <span
class="locality">Victoria
Station,
Hunts
Bank,
</span> <span
class="region">Manchester,
</span> <span
class="postal‐code">M3
1AR</span> <span
class="country‐name"><abbr>UK</abbr></span> </span> <a
class="tel"
href="#">+44
(0)844
847
8000</a>

    <a
class="url"
href="#">http://www.men‐arena.com/</a> </div> M I C R O F O R M AT S : 
 H C A L E N D A R
  86. None
  87. None
  88. None
  89. <tr
class="vevent"> <td
class="summary"><strong>The
Nonsense
Robots
at</strong>
 <span
class="location">Carling
Academy
Brixton</span></td> <td><abbr
title="20070902T20:00"
class="dtstart">September
2nd
 2007</abbr></td> <td
class="vcard
contact"> <span
class="fn
org">Carling
Academy
Brixton
Box
Office</span> <span
class="adr"> <span
class="region">London,
</span> <span
class="country‐name"><abbr>UK</abbr></span>

    </span> <a
class="tel"
href="#">+44
(0)7771
3000</a> <a
class="url"
href="#">http://www.brixton‐academy.co.uk/</a> </td> </tr> M I C R O F O R M AT S : 
 H C A L E N D A R
  90. None
  91. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE hREVIEW

  92. None
  93. <li> <h3> <a
href="#">Nonsense
Robots
at
MEN</a></h3> <h4>Making
Ska
accessible</h4> <p>Reviewed
on
August
1st
2007</p> <blockquote> <p>The
music
they
play
is
a
blend
of
ska/disco/funk.
 Whatever
it
is,
it
sounds
great.</p> </blockquote> <p>Jason
Santa
Maria</p>

    </li> M I C R O F O R M AT S : 
 H R E V I E W
  94. <li
class="hreview"> <h3
class="item"> <a
class="fn
url"
href="#">Nonsense
Robots
at
MEN</a></h3> <h4
class="summary">Making
Ska
accessible</h4> <p>Reviewed
on
<abbr
class="dtreviewed"
 title="20070801T0800">August
1st
2007</abbr></p> <blockquote
class="description"> <p>The
music
they
play
is
a
blend
of
ska/disco/funk...</p> </blockquote> <span
class="reviewer
vcard">

    <span
class="fn">Jason
Santa
Maria</span> </span> </li> M I C R O F O R M AT S : 
 H R E V I E W
  95. None
  96. None
  97. M I C R O F O R M AT

    S : 
 H R E V I E W <h4
class="summary">Making
Ska
accessible <abbr
title="5"
class="rating"><img
src="5.png"
alt="5"
/></abbr> </h4> <h5
class="vevent"> <a
class="url"
href="#"> <span
class="summary">Live
at
MEN
Arena</span>
on
 <abbr
class="dtstart"
title="20070923">September
23th</abbr></a> </h5> <p>Helpful?

 <a
href="#"
rev="vote‐for">Yes</a>
|
 <a
href="#"
rev="vote‐against">No</a>
|
 <a
href="#"
rel="self
bookmark">Bookmark</a> </p>
  98. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE hATOM

  99. None
  100. M I C R O F O R M AT

    S : 
 AT O M Stomping
Robots What
is
ska? Ska
combines
elements
of
Caribbean
mento
and
calypso
 with
American
jazz
and
rhythm
and
blues.
It
is
 characterised
by
a
walking
bass
line,
accented
guitar,
 or
piano
rhythms
on
the
offbeat,
and
in
some
cases,
 jazz‐like
horn
riffs. Jina
Bee
  101. M I C R O F O R M AT

    S : 
 AT O M <h1>Stomping
Robots</h1> <h2>What
is
ska?</h2> <p>Ska
combines
elements
of
Caribbean
mento
and
 calypso
with
American
jazz
and
rhythm
and
blues. It
is
characterised
by
a
walking
bass
line,
accented
 guitar,
or
piano
rhythms
on
the
offbeat,
and
in
some
 cases,
jazz‐like
horn
riffs.</p> <p>Jina
Bee</p>
  102. None
  103. <div> <h1> <h2> <div> <h3> <p> <address>

  104. M I C R O F O R M AT

    S : 
 AT O M <div
class="hentry"> <h1>Stomping
Robots</h1> <h2
class="entry‐title">What
is
ska?</h2> <div
class="entry‐content">
 <p><span
class="entry‐summary">Ska
combines
elements
 of
Caribbean
mento
and
calypso
with
American
jazz
and
 rhythm
and
blues.</span>
It
is
characterised
by
a
 walking
bass
line,
accented
guitar,
or
piano
rhythms
 on
the
offbeat,
and
in
some
cases,
jazz‐like
horn
 riffs.</p> </div> <address
class="vcard
author"> <a
href="#"
class="fn
url">Jina
Bee</a> </address> </div>
  105. M I C R O F O R M AT

    S : 
 AT O M <p> <abbr
class="updated
published"
 title="20070921">September
21st
2007</abbr>
|
 <a
href="#"
rel="bookmark">Bookmark</a> </p> 
 <ul> <li><a
href="/music"
rel="tag">Music</a></li> <li><a
href="/history"
rel="tag">History</a></li> <li><a
href="/ska"
rel="tag">Ska</a></li> </ul>
  106. None
  107. None
  108. None
  109. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE MICROFORMATS Empowering
Your
Markup
for
Web
2.0 by
John
Allsopp Published
by
Friends
Of
Ed
2007

  110. TRANSCENDING
CSS
 ‘FOR
A
BEAUTIFUL
WEB’ WORKSHOP
SERIES
2007‐8

  111. TRANSCENDING
CSS
 ‘FOR
A
BEAUTIFUL
WEB’ WORKSHOP
SERIES
2007‐8

  112. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE MODERN
CSS
SELECTORS

  113. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE “A
selector
represents
a
structure.
This
structure
can
be
 used
as
a
condition
(e.g.
in
a
CSS
rule)
that
determines
 which
elements
a
selector
matches
in
the
document
tree,
 or
as
a
flat
description
of
the
HTML
or
XML
fragment
 corresponding
to
that
structure.” W3.ORG/TR/2001/2001/CR‐CSS3‐SELECTORS‐20011113/#SELECTORS C S

    S 
 S E L E C T O R S
  114. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE “A
selector
enables
a
web
designer
 and
developer
to
make
a
lot
of
cool
 stuff
out
of
very
little.” ANDY
CLARKE C S S 


    S E L E C T O R S
  115. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 
 S E L E

    C T O R S ‐ Element
selectors

(
p
{
/*
rules
*/

}

) ‐ Class
selectors

(
.vcard
{
/*
rules
*/

}

) ‐ ID
selectors

(
#content
{
/*
rules
*/
}

) ‐ Pseudo‐class
selectors
(
a:link
{
/*
rules
*/

}

) ‐ Child
selectors
(
div
>
a
{
/*
rules
*/

}

) ‐ Adjacent
selectors
(
h2
+
p
{
/*
rules
*/

}

) ‐ Attribute
selectors
(
div[class="vcard"]
{
/*
rules
*/

}

) ‐ Pseudo‐elements
(
li:last‐child
{
/*
rules
*/

}

)
  116. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 
 S E L E

    C T O R S ‐ Element
selectors

(
p
{
/*
rules
*/

}

) ‐ Class
selectors

(
.vcard
{
/*
rules
*/

}

) ‐ ID
selectors

(
#content
{
/*
rules
*/
}

) ‐ Pseudo‐class
selectors
(
a:link
{
/*
rules
*/

}

) ‐ Child
selectors
(
div
>
a
{
/*
rules
*/

}

) ‐ Adjacent
selectors
(
h2
+
p
{
/*
rules
*/

}

) ‐ Attribute
selectors
(
div[class="vcard"]
{
/*
rules
*/

}

) ‐ Pseudo‐elements
(
li:last‐child
{
/*
rules
*/

}

)
  117. C H I L D 
 S E L E

    C T O R S <li> <h3>Live
at
Wembley
Arena</h3> <h4><img
src="5.png"
alt="5"
/></h4> <p>Reviewed
on
August
1st
2007</p> <h5>Live
at
Wembley
Arena
on
September
23th</h5> <img
src="jeffrey.jpg"
alt=""
/> <p>The
Nonsense
Robots
did
an
excellent
job
of
 mixing
ska
with
some
funky
reggae
beats.</p> </li> li
>
img
{
float
:
left;
}
  118. A D J A C E N T 
 S

    E L E C T O R S <li>
 <h3>Live
at
Wembley
Arena</h3> <h4><img
src="5.png"
alt="5"
/></h4> <p>Reviewed
on
August
1st
2007</p> <blockquote> <h5>Live
at
Wembley
Arena
on
September
23th</h5> <img
src="jeffrey.jpg"
alt=""
/> <p>The
Nonsense
Robots
did
an
excellent
job
of
 mixing
ska
with
some
funky
reggae
beats.</p> </blockquote> </li> h4
+
p
{
padding‐top
:
0;
}
  119. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE AT T R I B U T E

    
 S E L E C T O R S Style
an
element
either
based
 on
whether
an
element
has
an
 attribute
name
such
as
href
or
 based
on
the
attribute
value. img[alt] a[title] li[class="vcard"] div[id="content_main"]
  120. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE AT T R I B U T E

    
 S E L E C T O R S Style
an
element
either
based
 on
whether
an
element
has
an
 attribute
name
such
as
href
or
 based
on
the
attribute
value. img[alt] a[title] li[class="vcard"] div[id="content_main"]
  121. None
  122. AT T R I B U T E 
 S

    E L E C T O R S <div
id="siteinfo"> <a
href="#thenonsenserobots‐com"
rel="self">Back
to
top</a> </div> #siteinfo
a[rel="self"]
{
 display
:
block;
 width
:
97px;
 height
:
72px;
 position
:
absolute;
 top
:
‐1px;
 right
:
15px;
 background
:
url(top.png)
no‐repeat;
 text‐indent
:
‐9999px;
}
  123. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE AT T R I B U T E

    
 S E L E C T O R S Style
an
element
either
based
 on
whether
an
element
has
an
 attribute
name
such
as
href
or
 based
on
the
attribute
value. img[alt] a[title] li[class="vcard"] div[id="content_main"]
  124. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE AT T R I B U T E

    
 S E L E C T O R S Style
an
element
either
based
 on
whether
an
element
has
an
 attribute
name
such
as
href
or
 based
on
the
attribute
value. img[alt] a[title] li[class="vcard"] div[id="content_main"]
  125. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE AT T R I B U T E

    
 S E L E C T O R S Style
an
element
either
based
 on
whether
an
element
has
an
 attribute
name
such
as
href
or
 based
on
the
attribute
value. img[alt] a[title] li[class="vcard"] div[id="content_main"]
  126. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 
 2 . 1 


    S P E C I F I C I T Y Example Style
in
document
 (inline
style) #
of
ID
selectors #
of
class
selectors #
of
Element
(type)
 selectors li 0 0 0 1 li.vcard 0 0 1 1 #content
li.vcard 0 1 1 1
  127. None
  128. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE AT T R I B U T E

    
 S U B ‐ S T R I N G 
 S E L E C T O R S E[foo~="bar"] an
E
element
whose
"foo"
attribute
value
is
a
list
 of
space‐separated
values,
one
of
which
is
exactly
 equal
to
"bar" E[foo^="bar"] an
E
element
whose
"foo"
attribute
value
begins
 exactly
with
the
string
"bar" E[foo$="bar"] an
E
element
whose
"foo"
attribute
value
ends
 exactly
with
the
string
"bar" E[foo*="bar"] an
E
element
whose
"foo"
attribute
value
contains
 the
substring
"bar"
  129. AT T R I B U T E 
 S

    U B ‐ S T R I N G 
 S E L E C T O R S
  130. AT T R I B U T E 
 S

    U B ‐ S T R I N G 
 S E L E C T O R S <li> <h3>Sushi
Ska</h3> <h4>The
most
played
album
on
my
iPod</h4> <blockquote> <p>Sushi
Ska
is
a
unique
collection
of
Jamaican
influenced
ska.
 There
are
few
collections
of
ska
that
include
a
good
cross
 section
of
the
earliest
ska
classics
from
Jamaica
in
the
Sixties
 in
the
same
collection
as
music
of
the
Great
Ska
Revival
in
the
 United
Kingdom
in
the
Eighties.</p> </blockquote> <p><a
href="http://www.tantek.com/reviews/">Bookmark</a></p> </li>
  131. AT T R I B U T E 
 S

    U B ‐ S T R I N G 
 S E L E C T O R S <li> <h3>Sushi
Ska</h3> <h4>The
most
played
album
on
my
iPod</h4> <blockquote> <p>Sushi
Ska
is
a
unique
collection
of
Jamaican
influenced
ska.
 There
are
few
collections
of
ska
that
include
a
good
cross
 section
of
the
earliest
ska
classics
from
Jamaica
in
the
Sixties
 in
the
same
collection
as
music
of
the
Great
Ska
Revival
in
the
 United
Kingdom
in
the
Eighties.</p> </blockquote> <p><a
href="http://www.tantek.com/reviews/">Bookmark</a></p> </li>
  132. AT T R I B U T E 
 S

    U B ‐ S T R I N G 
 S E L E C T O R S <a
href="http://www.tantek.com/reviews/">Bookmark</a> ul
>
li
{
position
:
relative;
} li
>
h3,
li
>
h4,
li
>
blockquote

{
margin‐left
:
100px;
} a[href^="http://www.tantek.com"]:before
{
 content
:
url(tantek.png); position
:
absolute; top
:
0; left
:
0; }
  133. AT T R I B U T E 
 S

    U B ‐ S T R I N G 
 S E L E C T O R S
  134. AT T R I B U T E 
 S

    U B ‐ S T R I N G 
 S E L E C T O R S <a
href="http://www.tantek.com/reviews/">Bookmark</a> ul
>
li
{
position
:
relative;
} li
>
h3,
li
>
h4,
li
>
blockquote

{
margin‐left
:
100px;
} a[href^="http://www.tantek.com"]:before
{
 content
:
url(tantek.png); position
:
absolute; top
:
0; left
:
0; }
  135. AT T R I B U T E 
 S

    U B ‐ S T R I N G 
 S E L E C T O R S <a
href="http://www.tantek.com/reviews/">Bookmark</a> ul
>
li
{
position
:
relative;
} li
>
h3,
li
>
h4,
li
>
blockquote

{
margin‐left
:
100px;
} a[href^="http://www.tantek.com"]:before
{
 content
:
url(tantek.png); position
:
absolute; top
:
0; left
:
0; }
  136. AT T R I B U T E 
 S

    U B ‐ S T R I N G 
 S E L E C T O R S
  137. P S E U D O 
 E L E

    M E N T S <ul> <li><strong>Availability:</strong>
In
stock</li> <li><strong>Price:</strong>
&pound;9.99</li> </ul>
  138. P S E U D O 
 E L E

    M E N T S #content
ul
li
{
display
:
inline;
padding
:
0
10px;
 border‐right
:
1px
solid
#333;
} #content
ul
li:last‐child
{
padding‐right
:
0;
 border‐right‐width
:
0;
}
  139. P S E U D O 
 E L E

    M E N T S p:first‐line
{
 font‐size
:
110%;
 font‐weight
:
bold;
 }
  140. P S E U D O 
 E L E

    M E N T S p:first‐line
{
 font‐size
:
110%;
 font‐weight
:
bold;
 }
  141. P S E U D O 
 E L E

    M E N T S p:first‐line
{
 font‐size
:
110%;
 font‐weight
:
bold;
 }
  142. P S E U D O 
 E L E

    M E N T S p:first‐letter
{
 font‐size
:
400%;
 font‐weight
:
bold;
 }
  143. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C O M B I N E D

    
 S E L E C T O R S id
+
child #nav‐main
>
li
{
/*
rules
*/

} descendent
+
class
+
adjacent .nav
ul
li
+
li
{
/*
rules
*/

} id
+
descendent
+
element
+
pseudo
class #nav‐main
li:hover
{
/*
rules
*/

} descendent
+
id
+
child
+
attribute #nav‐main
ul
>
li
>
a[title]
{
/*
rules
*/

}
  144. TRANSCENDING
CSS
 ‘FOR
A
BEAUTIFUL
WEB’ WORKSHOP
SERIES
2007‐8

  145. TRANSCENDING
CSS
 ‘FOR
A
BEAUTIFUL
WEB’ WORKSHOP
SERIES
2007‐8

  146. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE CREATING
INSPIRED
 DESIGN
WITH
CSS

  147. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE CSS
BOX
MODEL

  148. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 
 B O X 


    M O D E L ‐ All
elements
generate
a
box ‐ Block‐level
elements
start
on
a
new
line
and
can
contain
other
 block
level
and
inline
elements ‐ Inline
elements
appear
within
content,
with
no
line ‐ Boxes
are
laid
out
along
the
horizontal
axis
 ‐ Create
line
boxes
  149. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 
 B O X 


    M O D E L Visual
model Box
model Lines Boxes Borders Padding Margins
  150. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 
 B O X 


    M O D E L ‐ Every
box
has
a
content
area ‐ Boxes
can
be
left
in
the
normal
flow ‐ Boxes
can
be
floated ‐ Boxes
can
be
positioned
  151. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 
 B O X 


    M O D E L “The
box
width
is
given
by
the
sum
of
the
left
and
right
 margins,
border,
and
padding,
and
the
content
width.
The
 height
is
given
by
the
sum
of
the
top
and
bottom
margins,
 border,
and
padding,
and
the
content
height.” W3.ORG/TR/REC‐CSS2/BOX‐HTML#BOX‐DIMENSIONS
  152. C S S 
 B O X 
 M O

    D E L Margin TM BM RM W3C
box
model Border LB TB BB RB Padding LP TP BP RP Content
  153. C S S 
 B O X 
 M O

    D E L Content
+
Padding
+
Border W3C
box
model
  154. C S S 
 B O X 
 M O

    D E L 100px W3C
box
model 5px 1px 5px 1px Total
box
width:
112px
  155. C S S 
 B O X 
 M O

    D E L #box
{
width
:
100px; padding
:
5px; border‐width
:
1px;

} Total
box
width:
100px 100px Microsoft
box
model
  156. J O N 
 H I C K S ’

    
 3 D 
 B O X 
 M O D E L padding
* margin
* background‐image background‐color border content *
transparent
  157. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE FLOATS

  158. None
  159. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE

  160. <ul> <li> <h3><a
href="#">The
Nonsense
Robots
live</a></h3> <h4>The
best
ska
night
of
the
year</h4> <p>Reviewed
on
August
1st
2007</p> <blockquote> <h5><a
href="#">Live
at
MEN
Arena
on
September
23th</a></h5> <p>The
Nonsense
Robots
did
an
excellent
job...</p> </blockquote> <span>Jeffrey
Zeldman</span>

    <p>Helpful?

<a
href="#">Yes</a>
|
<a
href="#">No</a>
|
 <a
href="#">Bookmark</a></p> </li> ... </ul> F L O AT S
  161. #content
ul
li
{
 float
:
left;
 margin‐right
:
5px;
 width
:
205px;
} #content
ul
li:last‐child
{
 margin‐right
:
0;
} F L O AT

    S
  162. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE <li> <li> <li> <li> <ul>

  163. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE

  164. #content
ul
li
{
 float
:
left;
 margin‐right
:
5px;
 width
:
410px;
 min‐height
:
24em;
 border‐bottom
:
1px
dotted
#fdfcef;
} #content
ul
li:last‐child
{
 margin‐right
:
0;
} F L

    O AT S
  165. <li> <li> <li> <li> <ul>

  166. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE

  167. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE NEGATIVE
MARGINS

  168. S T Y L I N G 
 F O

    R M 
 E L E M E N T S
  169. <form> <div
id="form_introduction"> <fieldset
id="form_info"> <fieldset
id="form_age"> <fieldset
id="form_activity"> <fieldset
id="form_transport"> <div
id="form_submit"> </fieldset> F O

    R M 
 X H T M L
  170. F O R M 
 X H T M L

    
 & 
 C S S <form> <div></div> <fieldset></fieldset> <fieldset></fieldset> <fieldset></fieldset> <fieldset></fieldset> <div></div> </form> form
{
 margin
:
0;
 padding
:
0;
 width
:
535px;
}
  171. <fieldset
id="form_info"> <h3>Tell
us
about
yourself</h3> <label
for="req_name"> <span>Your
name:</span> <input
type="text"
id="std_name"
/> </label> <label
for="std_dob"> <span>Date
of
birth:</span> <input
type="text"
id="std_dob"
/> </label>

    </fieldset> F I E L D S E T 
 X H T M L
  172. D I V I S I O N S 


    & 
 F I E L D S E T S <fieldset
id="form_info"> </fieldset> <fieldset
id="form_age"> </fieldset> #form_info
{
 padding
:
50px
40px
40px
0;
 background
:
url(fieldset_join.png)
no‐repeat;
} #form_age
{
 padding
:
50px
0
40px
40px;
 background
:
url(form_join.png)
no‐repeat;
}
  173. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE D I V I S I O N

    S 
 & 
 F I E L D S E T S 535px 50px 40px 40px [
content
] #form_age
{
 padding
:
50px
0
40px
40px;
 background
:
url(join_rt.png)
no‐repeat;
}
  174. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE D I V I S I O N

    S 
 & 
 F I E L D S E T S #form_info
{
 padding
:
50px
0
40px
40px;
 background
:
url(join_rb.png)
no‐repeat;
}
  175. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE D I V I S I O N

    S 
 & 
 F I E L D S E T S #form_age
{
 padding
:
50px
40px
40px
0;
 background
:
url(join_rt.png)
no‐repeat;
}
  176. D I V I S I O N S 


    & 
 F I E L D S E T S
  177. S T Y L I N G 
 H E

    A D I N G S 
 U S I N G 
 N E G AT I V E 
 M A R G I N S
  178. <fieldset
id="form_info"> <h3>Tell
us
about
yourself</h3> <label
for="req_name"> <span>Your
name:</span> <input
type="text"
id="std_name"
/> </label> <label
for="std_dob"> <span>Date
of
birth:</span> <input
type="text"
id="std_dob"
/> </label>

    </fieldset> S T Y L I N G 
 H E A D I N G S 
 U S I N G 
 N E G AT I V E 
 M A R G I N S
  179. 30px 50px 40px S T Y L I N G

    
 H E A D I N G S 
 U S I N G 
 N E G AT I V E 
 M A R G I N S
  180. #form_info
{
 padding
:
50px
0
40px
0;
} S T Y L I N G 


    H E A D I N G S 
 U S I N G 
 N E G AT I V E 
 M A R G I N S #form_info
h3
{
 margin
:
‐70px
0
0
200px;
 padding
:
0;
 width
:
385px;
 height
:
90px;
 background
:
url(h3_form_info.png)
no‐repeat;
 text‐indent
:
‐9999px;
}
  181. 30px 50px 40px S T Y L I N G

    
 H E A D I N G S 
 U S I N G 
 N E G AT I V E 
 M A R G I N S 50px
  182. S T Y L I N G 
 H E

    A D I N G S 
 U S I N G 
 N E G AT I V E 
 M A R G I N S
  183. S T Y L I N G 
 F O

    R M 
 E L E M E N T S
  184. #form_transport
input
{
 background‐color
:
transparent;
 border‐width
:
0;
border‐bottom
:
1px
dotted
#fff;
 font‐weight
:
bold;
 color
:
#fff;
} #form_transport
textarea
{
 background‐color
:
transparent;
 border
:
1px
dotted
#fff;
 color
:
#fff;
} #form_transport
label
{


    position
:
absolute;
 top
:
‐9999px;
}
 S T Y L I N G 
 F O R M 
 E L E M E N T S
  185. #form_transport
input
{
 background‐color
:
transparent;
 border‐width
:
0;
border‐bottom
:
1px
dotted
#fff;
 font‐weight
:
bold;
 color
:
#fff;
} #form_transport
textarea
{
 background‐color
:
transparent;
 border
:
1px
dotted
#fff;
 color
:
#fff;
} #form_transport
label
{


    position
:
absolute;
 top
:
‐9999px;
}
 S T Y L I N G 
 F O R M 
 E L E M E N T S
  186. #form_transport
input
{
 background‐color
:
transparent;
 border‐width
:
0;
border‐bottom
:
1px
dotted
#fff;
 font‐weight
:
bold;
 color
:
#fff;
} #form_transport
textarea
{
 background‐color
:
transparent;
 border
:
1px
dotted
#fff;
 color
:
#fff;
} #form_transport
label
{


    position
:
absolute;
 top
:
‐9999px;
}
 S T Y L I N G 
 F O R M 
 E L E M E N T S
  187. S T Y L I N G 
 F O

    R M 
 E L E M E N T S
  188. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE DEMONSTRATION

  189. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE CSS
POSITIONING

  190. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 3 
 P O S

    I T I O N I N G 
 T Y P E S Static Position
an
element
in
its
natural
position
in
the
normal
flow
 (default) Relative Offset
an
element
from
its
natural
position
in
the
normal
flow
using
 top,
bottom,
left
and
right
values Absolute Remove
an
element
from
the
normal
flow
and
position
it
in
relation
 to
either
its
closest
positioned
ancestor
or
the
root
element
using
 top,
bottom,
left
and
right
values
 Fixed Remove
an
element
from
the
normal
flow
and
position
it
in
relation
 to
the
view‐port
using
top,
bottom,
left
and
right
values;
it
does
not
 scroll

  191. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 3 
 P O S

    I T I O N I N G 
 T Y P E S Static Position
an
element
in
its
natural
position
in
the
normal
flow
 (default) Relative Offset
an
element
from
its
natural
position
in
the
normal
flow
using
 top,
bottom,
left
and
right
values Absolute Remove
an
element
from
the
normal
flow
and
position
it
in
relation
 to
either
its
closest
positioned
ancestor
or
the
root
element
using
 top,
bottom,
left
and
right
values
 Fixed Remove
an
element
from
the
normal
flow
and
position
it
in
relation
 to
the
view‐port
using
top,
bottom,
left
and
right
values;
it
does
not
 scroll

  192. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 3 
 P O S

    I T I O N I N G 
 T Y P E S Static Position
an
element
in
its
natural
position
in
the
normal
flow
 (default) Relative Offset
an
element
from
its
natural
position
in
the
normal
flow
using
 top,
bottom,
left
and
right
values Absolute Remove
an
element
from
the
normal
flow
and
position
it
in
relation
 to
either
its
closest
positioned
ancestor
or
the
root
element
using
 top,
bottom,
left
and
right
values
 Fixed Remove
an
element
from
the
normal
flow
and
position
it
in
relation
 to
the
view‐port
using
top,
bottom,
left
and
right
values;
it
does
not
 scroll

  193. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 3 
 P O S

    I T I O N I N G 
 T Y P E S Static Position
an
element
in
its
natural
position
in
the
normal
flow
 (default) Relative Offset
an
element
from
its
natural
position
in
the
normal
flow
using
 top,
bottom,
left
and
right
values Absolute Remove
an
element
from
the
normal
flow
and
position
it
in
relation
 to
either
its
closest
positioned
ancestor
or
the
root
element
using
 top,
bottom,
left
and
right
values
 Fixed Remove
an
element
from
the
normal
flow
and
position
it
in
relation
 to
the
view‐port
using
top,
bottom,
left
and
right
values;
it
does
not
 scroll

  194. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE RELATIVE
POSITIONING

  195. None
  196. None
  197. img.offset
{
 position
:
relative;
 top
:
50px;
 left
:
50px;
}
 R E L AT I V

    E 
 P O S I T I O N I N G
  198. R E L AT I V E 
 P O

    S I T I O N I N G <p><img
src="gravatar_jeffrey.jpg"
 alt=""
class="fl"
/>
...
</p>
  199. img.fl
{
 float
:
left;
}
 R E L AT I V E 


    P O S I T I O N I N G
  200. img.fl
{
 float
:
left;
 position
:
relative;
 left
:
‐15px;
} R E L AT I V

    E 
 P O S I T I O N I N G
  201. . img.fl
{
 float
:
left;
 position
:
relative;
 left
:
‐15px;
 margin‐right
:
‐5px;}
 R E L AT

    I V E 
 P O S I T I O N I N G
  202. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE ABSOLUTE
POSITIONING

  203. None
  204. img.offset
{
 position
:
absolute;
 top
:
0;
 left
:
0;
}
 A B S O L U

    T E 
 P O S I T I O N I N G
  205. img.offset
{
 position
:
absolute;
 top
:
0;
 left
:
0;
} div#contact
{
 position
:
relative; } A B S

    O L U T E 
 P O S I T I O N I N G
  206. None
  207. <li> <h2> <ul> <li> <li> <li> <li> <li>

  208. <div
id="content"> <h2>Albums</h2> <ul> <li
id="a01"></li> <li
id="a02"></li> <li
id="a03"></li> <li
id="a04"></li> <li
id="a05"></li> <li
id="a06"></li> </ul>

    </div> A B S O L U T E 
 P O S I T I O N I N G
  209. <ul> <li
id="a01"> <h3><a
href="#a01">Sushi
Ska
 <img
src="album_01.png"
alt=""
/></a></h3> <p><a
href="#">Sushi
Ska</a>
is
 The
Nonsense
Robots
at
their
very
best.</p> </li> </ul> A B

    S O L U T E 
 P O S I T I O N I N G
  210. None
  211. <ul> #content
ul
{
 position
:
relative;
}

  212. #content
h2:first‐child
+
ul
li
{
 width
:
340px;
 margin‐bottom
:
30px;
} <li> <li> <li> <li> <li> <li>

  213. #content
h2:first‐child
+
ul
h3,
 #content
h2:first‐child
+
ul
p
{
 display
:
inline;
margin
:
0;
padding
:
0;
} #content
h2:first‐child
+
ul
img
{
 position
:
absolute;
} <h3> <p>

  214. #a01
img
{
left
:
410px;
} #a02
img
{
left
:
550px;
} #a03
img
{
left
:
690px;
} #a04
img
{
top
:
140px;
left
:
410px;
} #a05
img
{
top
:
140px;
left
:
550px;
} #a06
img
{
top
:
140px;
left
:
690px;
} <a01> <a02> <a03> <a04>

    <a05> <a06>
  215. <a01> <a02> <a03> <a04> <a05> <a06>

  216. None
  217. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE DEMONSTRATION

  218. None
  219. <ul> <li> <h3> <p> <div> <img>

  220. <ul> <li
id="colly"
class="vcard"></li> <li
id="dan"
class="vcard"></li> <li
id="jina"
class="vcard"></li> <li
id="malarkey"
class="vcard"></li> </ul> A B S O

    L U T E 
 P O S I T I O N I N G
  221. <li
id="colly"
class="vcard"> <h3><span
class="fn">Colly
Wobbles</span></h3> <a
href="#colly"><img
src="colly.jpg"
alt=""
class="photo"
/></a> <p
class="summary">Colly
Wobbles...</p> <div> <span
class="org">c/o
Stuff
and
Nonsense
Records</span> <span
class="adr"> <span
class="locality">Gwaenysgor,
</span> <span
class="region">Flintshire,
</span> <span
class="postal‐code">LL18
6EP</span>

    </span> <span
class="tel">+44
(0)1745
851848</span> <a
class="email"
href="#">Email
Colly</a> </div> </li> A B S O L U T E 
 P O S I T I O N I N G
  222. <ul> #content
ul
{
 position
:
relative;
}

  223. <li> li.vcard
{
 width
:
255px;
} <li> <li> <li>

  224. <ul> .photo,
.vcard
div
{
 position
:
absolute;
} .vcard
div
{
 width
:
190px;
}

  225. <li> <img> <div> .photo,
.vcard
div
{
 position
:
absolute;
} .vcard
div
{
 width
:
190px;
} #colly
.photo
{
 top
:
100px;
 left
:
275px;
}

    #colly
div
{
 top
:
645px;
 left
:
275px;
}
  226. <img> <div> #dan
.photo
{
 top
:
100px;
 left
:
475px;
} #dan
div
{
 top
:
485px;
 left
:
490px;
} <li>

  227. <img> <div> #jina
.photo
{
 top
:0;
 left
:
675px;
} #jina
div
{
 top
:
205px;
 left
:
690px;
} <li>

  228. <img> <div> #malarkey
.photo
{
 top
:460px;
 left
:
675px;
} #malarkey
div
{
 top
:
645px;
 left
:
675px;
} <li>

  229. <img> <div> <li> <li> <li> <li> <img> <div> <img> <div>

    <img> <div>
  230. <img> <div> <li> <li> <li> <li> <img> <div> <img> <div>

    <img> <div>
  231. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE

  232. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE

  233. AT T R I B U T E 
 S

    E L E C T O R S <li
id="colly"
class="vcard"> <h3><span
class="fn">Colly
Wobbles</span></h3> <a
href="#colly"><img
src="colly.jpg"
alt=""
class="photo"
/></a> <p
class="summary">Colly
Wobbles...</p> <div> <span
class="org">c/o
Stuff
and
Nonsense
Records</span> <span
class="adr"> <span
class="locality">Gwaenysgor,
</span> <span
class="region">Flintshire,
</span> <span
class="postal‐code">LL18
6EP</span> </span> <a
class="tel"
callto="44‐1745‐851848">+44
(0)1745
851848</a> <a
class="email"
href="#">Email
Colly</a> </div> </li>
  234. AT T R I B U T E 
 S

    E L E C T O R S <a
class="tel"
callto="44‐1745‐851848">+44
(0)1745
851848</a> <a
class="email"
href="#">Email
Colly</a>
 a[class="tel"]
{
 padding
:
0
0
2px
25px;
 background
:

url(vcard_tel.png)
no‐repeat
0
50%;
} 
 a[class="email"]
{
 padding‐left
:
25px;
 background
:

url(vcard_email.png)
no‐repeat
0
50%;
}
  235. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE DEMONSTRATION

  236. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE FIXED
POSITIONING

  237. None
  238. <ul> #content
ul
{
 position
:
relative;
} .photo
{
 position
:
fixed;
}

  239. None
  240. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE DEMONSTRATION

  241. #d01
{
 position
:
relative;
} #d01
img
{
 position
:
absolute;
} <a01> <a02> <a03> <d01> Z ‐

    I N D E X
  242. #d01
{
 position
:
relative;
} #d01
img
{
 position
:
absolute;
} #a01
{
z‐index
:
1;
} #a02
{
z‐index
:
2;
} #a03
{
z‐index
:
3;
} <a01> <a02> <a03>

    <d01> Z ‐ I N D E X
  243. #d01,
#d02
{
 position
:
relative;
} #d01
img,
#d02
img
{
 position
:
absolute;
} #a01
{
z‐index
:
1;
} #a02
{
z‐index
:
2;
} #a03
{
z‐index
:
3;
} #a04
{
z‐index
:
1;
} #a05
{
z‐index
:
2;
} #a06
{
z‐index
:
3;
}

    <a01> <a02> <a03> <a04> <a05> <a06> <d02> <d01> Z ‐ I N D E X
  244. #d01,
#d02
{
 position
:
relative;
} #d01
{
z‐index
:
2;
} #d02
{
z‐index
:
1;
} #d01
img,
#d02
img
{
 position
:
absolute;
} <d02> <d01> Z ‐

    I N D E X
  245. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE COMBINATION
TECHNIQUES

  246. None
  247. <div> <a> <img> <h2> <p> <form> <div>

  248. <div
id="content_product"> <a
href="#"><img
src="01.jpg"
alt=""
/>See
larger
image</a> <h2>Sushi
Ska</h2> <p>Sushi
Ska
is
The
Nonsense
Robots
at
their
very
best,
 exotic,
raw
and
full
of
flavour.</p> <ul> <li>Availability:
In
stock</li> <li>Price:
&pound;
9.99</li> </ul> <p>This
item
is
delivered
free
in
the
UK.</p>

    ... </div> C O M B I N AT I O N 
 T E C H N I Q U E S
  249. <div
id="content_product"> ... <form
method="post"
action="#"> <fieldset> <label
for="i01"><abbr
title="Quantity">Qty:</abbr> <input
type="text"
id="i12"
/></label> <input
type="submit"
value="Add
to
cart"
/> </fieldset> </form> <div
id="nav_cart">

    <a
href="#">Proceed
to
checkout</a> <p>Your
<a
href="#">shopping
cart</a>
is
empty</p>
 </div> </div> C O M B I N AT I O N 
 T E C H N I Q U E S
  250. #content_product
{
 position
:
relative;
} <div> C O M B I N AT

    I O N 
 T E C H N I Q U E S
  251. <a> #content_product
>
a
{
 float
:
left;
} C O M B I N AT

    I O N 
 T E C H N I Q U E S
  252. <h2> <p> <form> C O M B I N AT

    I O N 
 T E C H N I Q U E S
  253. C O M B I N AT I O N

    
 T E C H N I Q U E S <div> #content_product
div
{
 position
:
absolute;
 top
:
10px;
 right
:
‐220px;
}
  254. C O M B I N AT I O N

    
 T E C H N I Q U E S <div> <h2> <p> <form> <a>
  255. C O M B I N AT I O N

    
 T E C H N I Q U E S <div> <h2> <p> <form> <a>
  256. None
  257. None
  258. <li> <li> <li> <li> <li> <li> <ul>

  259. <ul
class="hlisting
offer‐sale"> <li
id="a01"
class="item"> <h3
class="summary
fn"><a
href="#a01">Sushi
Ska
 <img
src="01.png"
alt="Sushi
Ska"
/></a></h3> <p
class="description"><a
href="#"
class="url">Sushi
Ska</a>
 is
The
Nonsense
Robots
at
their
very
best,
exotic,
raw
and
 full
of
flavour.</p> <p
class="price"><strong>Price:</strong>
&pound;9.99</p> <form
method="post"
action="shop_index.html"> <fieldset>

    <label
for="i01"><abbr
title="Quantity">Qty:</abbr> <input
type="text"
id="i01"
/></label> <input
type="submit"
value="Add
to
cart"
/> </fieldset> </form> </li> C O M B I N AT I O N 
 T E C H N I Q U E S
  260. <ul> C O M B I N AT I O

    N ul
{
 position
:
relative;
 padding‐top:
360px;
}
  261. <ul> <a01> <a02> <a03> <a04> <a05> <a06> C O M

    B I N AT I O N ul
{
 position
:
relative;
 padding‐top:
360px;
}
 li
{
 float
:
left;
 width
:
280px;
 height
:
120px;
 margin‐right
:
10px; margin‐bottom
:
20px;
}
  262. <h3> <h3> <h3> <h3> <h3> <h3> C O M B

    I N AT I O N h3
{
 position
:
absolute; top
:
0;
 left
:
0; width
:
132px;
 margin
:
0;
 padding‐top
:
135px; }
  263. <h3> <h3> <h3> <h3> <h3> <h3> C O M B

    I N AT I O N #a02
h3
{
 left
:
160px;
} #a03
h3
{
 left
:
320px;
} #a04
h3
{
 top
:
170px;
} #a05
h3
{
 top
:
170px;
 left
:
160px;
} #a06
h3
{
 top
:
170px;
 left
:
320px;
}
  264. <h3> <h3> <h3> <h3> <h3> <h3> C O M B

    I N AT I O N h3
{
 position
:
absolute;
} h3
img
{
 position
:
absolute;
 top
:
0;
 left
:
0;
}
  265. <ul> <a01> <a02> <a03> <a04> <a05> <a06> <h3> <h3> <h3>

    <h3> <h3> <h3>
  266. <ul> <a01> <a02> <a03> <a04> <a05> <a06> <h3> <h3> <h3>

    <h3> <h3> <h3>
  267. None
  268. TRANSCENDING
CSS
 ‘FOR
A
BEAUTIFUL
WEB’ WORKSHOP
SERIES
2007‐8

  269. TRANSCENDING
CSS
 ‘FOR
A
BEAUTIFUL
WEB’ WORKSHOP
SERIES
2007‐8

  270. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE SIMPLE
STEPS
TO
BETTER
 WEB
TYPOGRAPHY

  271. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE RESET
BROWSER
DEFAULTS

  272. A N D R E W 
 K R E

    S PA N I S 
 G L O B A L 
 W H I T E S PA C E 
 R E S E T *
{ margin
:
0;
 padding
:
0;
 } LEFTJUSTIFIED.NET/JOURNAL/2004/10/19/GLOBAL‐WS‐RESET/
  273. YA H O O 
 R E S E T

    
 B R O W S E R 
 D E FA U LT S Text body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset, input,textarea,p,blockquote,th,td
{
margin
:
0;
padding
:
0;
}
 table
{
border‐collapse
:
collapse;
border‐spacing
:
0;
}
 fieldset,
img
{
border
:
0;
}
 address,caption,cite,code,dfn,em,strong,th,var
{
font‐style
:
 normal;
font‐weight
:
normal;
}
 ol,
ul
{
list‐style
:
none;
}
 caption,th
{
text‐align
:
left;
}
 h1,h2,h3,h4,h5,h6
{
font‐size
:
100%;
font‐weight
:
normal;
}
 q:before,q:after
{
content
:
'';
}
 abbr,acronym
{
border
:
0;
}
 DEVELOPER.YAHOO.COM/YUI/RESET
  274. E R I C 
 M E Y E R

    ’ S 
 R E S E T 
 B R O W S E R 
 D E FA U LT S html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
 h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
 cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
 small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
 li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
 tfoot,
thead,
tr,
th,
td
{
 margin
:
0;
padding
:
0;
border
:
0;
outline
:
0;
font‐weight
:
 inherit;
font‐style
:
inherit;
font‐size
:
100%;
font‐family
:
 inherit;
vertical‐align:
baseline;
background
:
transparent;
} :focus
{
outline
:
0;
}
 ol,
ul
{
list‐style
:
none;
} table
{
border‐collapse
:
collapse;
border‐spacing
:
0;
} caption,
th,
td
{
text‐align
:
left;
font‐weight
:
normal;
} blockquote,
q
{
quotes
:
""
"";
} MEYERWEB.COM/ERIC/THOUGHTS/2007/05/01/RESET‐RELOADED/
  275. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE “COMPOSE
TO
A
 VERTICAL
RHYTHM” RICHARD
RUTTER
24WAYS.ORG/2006
(DAY
12)

  276. None
  277. None
  278. None
  279. None
  280. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE body
{
font‐size
:
12px;
} p
{
font‐size
:
1em;
/*
12px
*/ line‐height
:
1.5;
/*
18px
*/ margin
:
0
0
1.5em
0;
} p:last‐child
{
margin‐bottom
:
0;
} C A L

    C U L AT I N G 
 L I N E 
 H E I G H T Calculate
the
line‐height
in
ems
by
dividing
the
desired
 line‐height
(18px)
by
the
base
font‐size
(12px)
to
give
a
 value
of
1.5
  281. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE #content_sub
p
{
 font‐size
:
0.8333em;




/*
10px
÷
12px
*/ line‐height
:
1.8em;




/*
18px
÷
10px
*/ } S M A L

    L E R 
 F O N T‐ S I Z E 
 L I N E 
 H E I G H T Sidenote:
Calculate
the
font‐size
in
ems
by
dividing
the
desired
font‐ size
(10px)
by
the
base
font‐size
(12px)
to
give
a
value
of

0.8333em.
 Maintain
vertical
rhythm
by
dividing
vertical
rhythm
unit
(18px)
 by
the
new
font‐size
(10px
to
give
a
value
of
1.8em.
  282. None
  283. None
  284. None
  285. None
  286. None
  287. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE INCREMENTAL
LEADING

  288. None
  289. None
  290. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE p
{
font‐size
:
1em;




/*
12px
*/ line‐height
:
1.8em;




/*
18px
*/ } I N C R E

    M E N TA L 
 L E A D I N G Four
lines
of
text
in
the
main
content: 18px
x
4
=
72px
  291. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE I N C R E M E N

    TA L 
 L E A D I N G To
calculate
for
5
lines
of
text
in
the
sidebar: 72px
÷
5
=
14.4px #content_sub
p
{ font‐size
:
0.8333em; line‐height
:
1.44em;


/*
14.4px
÷
10px
*/ }
  292. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE I N C R E M E N

    TA L 
 L E A D I N G #content_sub
p
{ font‐size
:
0.8333em; line‐height
:
1.44em; margin‐top
:
0.28em;
 }
  293. None
  294. None
  295. None
  296. None
  297. None
  298. CODE.GOOGLE.COM/P/BLUEPRINTCSS/

  299. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE CSS3
(THIRD
TIME
LUCKY)

  300. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 3 
 M O D

    U L E S Selectors
module Refined
selectors
to
target
an
element
based
on
an
 attribute
or
position
in
the
document
flow
plus
new
 pseudo‐classes
and
elements. Backgrounds
and
borders module Style
any
box’s
borders
and
background
including
 attach
multiple
background‐images
to
one
element. Multi‐column
layout
 module Making
it
simpler
to
create
column
layouts
without
 additional
markup
by
using
column
counts,
gaps
and
 rules. Advanced
Layout
module Aims
to
fully
separate
visual
layout
order
from
a
 document’s
content. Media
Queries
module Extending
the
usefulness
of
media
types
in
 combination
with
window
widths,
heights
and
aspect
 ratio.
  301. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 3 
 M O D

    U L E S Selectors
module Refined
selectors
to
target
an
element
based
on
an
 attribute
or
position
in
the
document
flow
plus
new
 pseudo‐classes
and
elements. Backgrounds
and
borders module Style
any
box’s
borders
and
background
including
 attach
multiple
background‐images
to
one
element. Multi‐column
layout
 module Making
it
simpler
to
create
column
layouts
without
 additional
markup
by
using
column
counts,
gaps
and
 rules. Advanced
Layout
module Aims
to
fully
separate
visual
layout
order
from
a
 document’s
content. Media
Queries
module Extending
the
usefulness
of
media
types
in
 combination
with
window
widths,
heights
and
aspect
 ratio.
  302. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 3 
 M O D

    U L E S Selectors
module Refined
selectors
to
target
an
element
based
on
an
 attribute
or
position
in
the
document
flow
plus
new
 pseudo‐classes
and
elements. Backgrounds
and
borders module Style
any
box’s
borders
and
background
including
 attach
multiple
background‐images
to
one
element. Multi‐column
layout
 module Making
it
simpler
to
create
column
layouts
without
 additional
markup
by
using
column
counts,
gaps
and
 rules. Advanced
Layout
module Aims
to
fully
separate
visual
layout
order
from
a
 document’s
content. Media
Queries
module Extending
the
usefulness
of
media
types
in
 combination
with
window
widths,
heights
and
aspect
 ratio.
  303. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 3 
 M O D

    U L E S Selectors
module Refined
selectors
to
target
an
element
based
on
an
 attribute
or
position
in
the
document
flow
plus
new
 pseudo‐classes
and
elements. Backgrounds
and
borders module Style
any
box’s
borders
and
background
including
 attach
multiple
background‐images
to
one
element. Multi‐column
layout
 module Making
it
simpler
to
create
column
layouts
without
 additional
markup
by
using
column
counts,
gaps
and
 rules. Advanced
Layout
module Aims
to
fully
separate
visual
layout
order
from
a
 document’s
content. Media
Queries
module Extending
the
usefulness
of
media
types
in
 combination
with
window
widths,
heights
and
aspect
 ratio.
  304. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 3 
 M O D

    U L E S Selectors
module Refined
selectors
to
target
an
element
based
on
an
 attribute
or
position
in
the
document
flow
plus
new
 pseudo‐classes
and
elements. Backgrounds
and
borders module Style
any
box’s
borders
and
background
including
 attach
multiple
background‐images
to
one
element. Multi‐column
layout
 module Making
it
simpler
to
create
column
layouts
without
 additional
markup
by
using
column
counts,
gaps
and
 rules. Advanced
Layout
module Aims
to
fully
separate
visual
layout
order
from
a
 document’s
content. Media
Queries
module Extending
the
usefulness
of
media
types
in
 combination
with
window
widths,
heights
and
aspect
 ratio.
  305. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE CSS3
SELECTORS W3.ORG/TR/CSS‐3‐SELECTORS/

  306. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 3 
 S E L

    E C T O R S 
 M O D U L E E:nth‐child(n) an
E
element,
the
n‐th
child
of
its
parent E:nth‐last‐child(n) an
E
element,
the
n‐th
child
of
its
parent,
 counting
from
the
last
one E:nth‐of‐type(n) an
E
element,
the
n‐th
sibling
of
its
type E:only‐of‐type an
E
element,
only
sibling
of
its
type E:not(s) an
E
element
that
does
not
match
simple
selector
s E
~
F an
F
element
preceded
by
an
E
element
  307. None
  308. C S S 3 
 S E L E C

    T O R S : N T H ‐ C H I L D <tr> <td
class="track">2</td> <td>Train
To
Skaville</td>
 <td><a
href="#"</a></td> </tr> <tr
class="odd"> <td
class="track">3</td> <td>Ska
Train</td>
 <td><a
href="#">Listen</a></td> </tr>
  309. C S S 3 
 S E L E C

    T O R S : N T H ‐ C H I L D <tr> <td
class="track">2</td> <td>Train
To
Skaville</td>
 <td><a
href="#"</a></td> </tr> <tr
class="odd"> <td
class="track">3</td> <td>Ska
Train</td>
 <td><a
href="#">Listen</a></td> </tr>
  310. C S S 3 
 S E L E C

    T O R S : N T H ‐ C H I L D Every
odd
row
of
an
HTML
table tr:nth‐child(2n+1)
{
 /*
rules
*/

} tr:nth‐child(odd)
{
 /*
rules
*/

} Every
even
row
of
an
HTML
table tr:nth‐child(2n)
{
 /*
rules
*/

} tr:nth‐child(even)
{
 /*
rules
*/

}
  311. C S S 3 
 S E L E C

    T O R S 
 ‐ 
 : N T H ‐ C H I L D The
first
six
rows
of
an
HTML
table tr:nth‐child(‐n+6)
{
/*
rules
*/

} The
last
two
rows
of
an
HTML
table tr:nth‐last‐child(‐n+2)
{
/*
rules
*/

} The
9th,
19th,
29th,
etc,

row
of
an
HTML
table tr::nth‐child(10n‐1)
{
/*
rules
*/

} tr:nth‐child(10n+9)
{
/*
rules
*/

}
  312. <p><img
src="01.png"
 class="left"
/>...</p> <p><img
src="02.png"
 class="right"
/>...</p> <p><img
src="03.png"
 class="left"
/>...</p> : N T H

    ‐ C H I L D
  313. Alternate
floated
images img:nth‐of‐type(2n+1)
{
 float:
left;
} img:nth‐of‐type(2n)
{
 float:
right;
} : N T H ‐

    C H I L D
  314. <li
class="first">...</li> <li>...</li> <li>...</li> : F I R S T‐ O

    F ‐ T Y P E
  315. ul
li:first‐of‐type
{ border
:
1px
solid
#666;
 text‐transform
:
uppercase;
} : F I R S T‐ O

    F ‐ T Y P E W3.ORG/TR/CSS‐3‐SELECTORS/
  316. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE CSS3
BACKGROUNDS
&
 BORDERS
MODULE W3.ORG/TR/CSS‐3‐BACKGROUND/

  317. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 3 
 B A C

    K G R O U N D S 
 A N D 
 B O R D E R S ‐ Background‐clip ‐ Background‐origin ‐ Background‐size ‐ Background‐break ‐ Border‐radius ‐ Border‐break ‐ Border‐image ‐ Box‐shadow
  318. <div
class="box"> <div
class="bi"> <div
class="bt"> </div> </div> </div> <p>Just
when
you
thought
you
knew
everything
there
is
to
know
 about
ska,
Tripwire
comes
along
and
trips
you
up.</p> <div
class="bb"> <div></div>

    </div> </div> C S S 3 
 B A C K G R O U N D S 
 A N D 
 B O R D E R S
  319. <div
class="box"> <div
class="bi"> <div
class="bt"> </div> </div> </div> <p>Just
when
you
thought
you
knew
everything
there
is
to
know
 about
ska,
Tripwire
comes
along
and
trips
you
up.</p> <div
class="bb"> <div></div>

    </div> </div> C S S 3 
 B A C K G R O U N D S 
 A N D 
 B O R D E R S
  320. p
{
background‐image
:
 url(top_left.png), url(top_right.png), url(bottom_right.png), url(bottom_left.png), url(top_center.png), url(middle_right.png), url(bottom_center.png), url(middle_left.png);
} C

    S S 3 
 B A C K G R O U N D S 
 A N D 
 B O R D E R S
  321. p
{
background‐repeat
:
 no‐repeat,
 no‐repeat,
 no‐repeat,
 no‐repeat,
 repeat‐x,
 repeat‐y,
 repeat‐x,
 repeat‐y;
} C

    S S 3 
 B A C K G R O U N D S 
 A N D 
 B O R D E R S
  322. p
{
background‐position
:
 top
left, top
right, bottom
right, bottom
left, top
left, top
right, bottom
right, bottom
left;
} C

    S S 3 
 B A C K G R O U N D S 
 A N D 
 B O R D E R S
  323. None
  324. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 3 
 B A C

    K G R O U N D S 
 A N D 
 B O R D E R S “13.
Layering
multiple
background
images ‐The
properties
'background‐image',
'background‐origin',
 'background‐clip',
'background‐repeat',
'background‐size',
and
 'background‐position'
may
have
multiple
comma‐separated
values.
 Excepting
the
case
that
'background‐image'
is
'none',
if
the
values
 are
specified
as
follows: ‐backgound‐image:
w 1,…wM ‐backgound‐repeat:
x 1,…xR ‐backgound‐size:
y 1,…yS ‐backgound‐position:
s 1,…sP ‐the
number
of
layers
is
N
=
max(M,
R,
S,
P).” W3.ORG/TR/CSS‐3‐BACKGROUND/
  325. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE CSS3
MULTI‐COLUMN
MODULE W3.ORG/TR/CSS‐3‐MULTICOL/

  326. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE column‐count column‐width column‐gap column‐rule ‐moz‐column‐count ‐moz‐column‐width ‐moz‐column‐gap ‐moz‐column‐rule

    C S S 
 M U LT I ‐ C O L U M N 
 M O D U L E
  327. None
  328. <div> <h1> <h2> <div> <div> <p> <address> <p>

  329. <div
class="hentry"> <h1>Stomping
Robots</h1> <h2
class="entry‐title">What
is
ska?</h2> <div
class="photo"><img
src="jina.jpg"
/></div> <div
class="entry‐content"> <p
class="entry‐summary"></p> <p>The
2
Tone
genre,
which
began
in
the
late
1970s
in
England,
 was
a
fusion
of
Jamaican
ska
rhythms
and
melodies
with
punk
 rock's
uncompromising
lyrics.</p> </div>

    <address
class="vcard
author"></address> </div> C S S 
 M U LT I ‐ C O L U M N 
 M O D U L E
  330. <div
class="hentry"> <h1>Stomping
Robots</h1> <h2
class="entry‐title">What
is
ska?</h2> <div
class="photo"><img
src="jina.jpg"
/></div> <div
class="entry‐content"> <p
class="entry‐summary"></p> <p>The
2
Tone
genre,
which
began
in
the
late
1970s
in
England,
 was
a
fusion
of
Jamaican
ska
rhythms
and
melodies
with
punk
 rock's
uncompromising
lyrics.</p> </div>

    <address
class="vcard
author"></address> </div> H I G H L I G H T I N G 
 M I C R O F O R M AT S
  331. <div
class="hentry"> <h1> <h2
class="entry‐title"> <div
class="photo"> <div
class="entry‐title"> <p
class="entry‐summary"> <address
class="vcard
author"> <p>

  332. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE .entry‐content
{
 column‐count
:
3;
 column‐gap
:
5px; column‐rule
:
thin
solid
black; /*
For
Firefox
*/ ‐moz‐column‐count
:
3;
 ‐moz‐column‐gap
:
5px;
} C

    S S 
 M U LT I ‐ C O L U M N 
 M O D U L E
  333. None
  334. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 
 M U LT I

    ‐ C O L U M N 
 M O D U L E .entry‐content
{
 column‐width
:
200px;
 column‐gap
:
5px; column‐rule
:
thin
solid
black; /*
For
Firefox
*/ ‐moz‐column‐width
:
3;
 ‐moz‐column‐gap
:
5px;
}
  335. None
  336. C S S 
 M U LT I ‐ C

    O L U M N 
 M O D U L E .replies
ol
{
 column‐count
:
3;
 /*
For
Firefox
*/ ‐moz‐column‐count
:
3;
}
  337. None
  338. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE CSS3
ADVANCED
LAYOUT W3.ORG/TR/CSS‐3‐LAYOUT/ CESARACEBAL.COM/RESEARCH/THESIS/ALMCSS/

  339. None
  340. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 3 
 A D VA

    N C E D 
 L AY O U T 
 M O D U L E Slot
letter identifies
the
slot
within
the
grid
for
any
content
that
 will
be
positioned
within
it @
(at
symbol) A
default
slot
into
which
content
that
has
not
been
 situated
can
flow .
(period) A
white‐space
slot
that
can
have
no
content
inserted
 into
it
  341. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 3 
 A D VA

    N C E D 
 L AY O U T 
 M O D U L E body
{
display
:
 "a
b
c
d" "e
f
g
h" "i
j
k
l";
}
  342. I J K L C D B A G H

    F E
  343. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 3 
 A D VA

    N C E D 
 L AY O U T 
 M O D U L E div#s01
{
position
:
ab;
} div#s02
{
position
:
c;
} div#s03
{
position
:
d;
} div#s04
{
position
:
ef;
} div#s05
{
position
:
gh;
} div#s06
{
position
:
i;
} div#s07
{
position
:
j;
} div#s08
{
position
:
k;
} div#s09
{
position
:
l;
}
  344. EF I AB C D GH J K L

  345. None
  346. None
  347. None
  348. None
  349. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE C S S 3 
 A D VA

    N C E D 
 L AY O U T 
 M O D U L E Slot
letter identifies
the
slot
within
the
grid
for
any
content
that
 will
be
positioned
within
it @
(at
symbol) A
default
slot
into
which
content
that
has
not
been
 situated
can
flow .
(period) A
white‐space
slot
that
can
have
no
content
inserted
 into
it
  350. @ @ @ @ @ @

  351. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE TRANSCENDING
CSS The
Fine
Art
Of
Web
Design by
Andy
Clarke Published
by
New
Riders
2006

  352. TRANSCENDING
CSS
FOR
A
BEAUTIFUL
WEB ANDY
CLARKE Q&A

  353. TRANSCENDING
CSS
 ‘FOR
A
BEAUTIFUL
WEB’ WORKSHOP
SERIES
2007‐8