Creating Sexy
Stylesheets
Jina Bolton

Sexy?

Write it clean.
Keep it clean.

Clarity is
beautiful.

Comments are
your friend.

/*
Company Name Typography CSS
Author Jina Bolton
Version v1.0 | 2008-09-25
.................................... */

/* COLORS
Background 222
Text fff
Links c99
Visited Links 966
Hovered Links fcc
Headers 9cc
Sub-headers 699
.................................... */

/* =RESET
.................................... */
/* =TYPOGRAPHY
.................................... */
/* =STRUCTURE
.................................... */
See: http://stopdesign.com/log/2005/05/03/css-tip-flags.html

/* STYLESHEET SECTIONS
CSS Flags marked with [=]
RESET
GLOBAL
TYPOGRAPHY
STRUCTURE
FORMS
TABLES
WIDGETS
.................................... */

profile.css
#profile {
width: 600px;
/* redefined: IE-6.css, line 25 */
}
IE-6.css
#profile {
width: 620px;
/* override: profile.css, line 270 */
}

Be organised.

@import 'reset.css';
@import 'structure.css';
@import 'typography.css';
@import 'widgets.css';

Readability vs.
optimisation

CSS 3

“CSS 3
A giant serving of
FAIL ”
Alex Russell

“CSS 3
(Third time lucky)”
—Andy Clarke

CSS 1 1996

CSS 2 1997

CSS 2.1
Candidate Recommendation

CSS 3

CSS 3 Modules
๏ Sele#ors
๏ Backgrounds & Borders
๏ Multi-column Layout
๏ Advanced Layout
๏ Grid Positioning
๏ Media Queries

Backgrounds
& Borders
Style any box’s borders
and background including attaching
multiple background-images to a
single element.

Backgrounds
& Borders
Style any box’s borders and
background including attach multiple
background-images to a single
element.

Backgrounds
& Borders <div class=\"vcard\">
<div class=\"addr-bl\">
<div class=\"addr-tr\">
…
Style any box’s borders and
</div>
background including attach multiple
</div>
</div>
background-images to a single
element.

.vcard {
background:
#000
Backgrounds }
url(a-grad.gif)
repeat-x;
& Borders .addr-bl {
background:
url(a-bl.gif)
100% 0
Style any box’s borders and
no-repeat;
background including attach multiple
}
background-images to a single
.addr-tr {
element. background:
url(a-tr.gif)
100% 0
no-repeat;
}

Backgrounds
& Borders
<div class=\"vcard\">…</div>
Style any box’s borders and
background including attach multiple
background-images to a single
element.

.vcard {
background-color: #000;
Backgrounds background-image:
url(a-grad.gif),
url(a-bl.gif),
& Borders url(a-tr.gif);
background-repeat:
repeat-x,
Style any box’s borders and
no-repeat,
background including attach multiple
no-repeat;
background-images to a single
element. background-position:
0 0,
100% 0,
0 100%;
}

Backgrounds
& Borders
Style any box’s borders and
background including attach multiple
background-images to a single
element.

<div class=\"vcard\">…</div>
.vcard {
border-image:
url(\"border.png\")
30 30 30 30
stretch;
border:
double green 1em;
}

Multi-column Layout
Making it simpler to create column
layouts without additional markup
by using column widths, counts, gaps
and rules.

<div class=\"entry-content\">
<div class=\"col first\">
…
</div>
<div class=\"col\">
…
</div>
</div>

.entry-content .col {
float: left;
width: 467px;
margin-left: 30px;
}
.entry-content .first {
margin-left: 0;
}
/* .entry-content
clear-fix rules */

<div class=\"entry-content\">
…
</div>
.entry-content {
column-count: 2;
column-gap: 30px;
}

<div class=\"entry-content\">
…
</div>
.entry-content {
column-width: 270px;
column-gap: 30px;
}

Grid Positioning
Gives the ability to add invisible
grid rules to create grid layouts
(like in books and newspapers),
and uses sizing and new float
properties for placing content.

<div class=\"entry-content\">
…
</div>
.entry-content {
column-count: 4;
column-gap: 30px;
}

.entry-content {
grid-columns:
(30px * *)[4];
column-count: 4;
column-gap: 30px;
}

.entry-content {
grid-columns:
(30px * *)[4];
grid-rows:
9em 33.3% *;
column-count: 4;
column-gap: 30px;
}

<div class=\"entry-content\">
…
<img src=\"sushi.jpg\"
class=\"photo\"
alt=\"\" />
…
</div>

.entry-content img.photo {
ich float: page bottom left;
float-offset: 4gr 1gr;
}

<div class=\"entry-content\">
<h2>What is Sushi?</h2>
…
<img src=\"sushi.jpg\"
class=\"photo\"
alt=\"\" />
</div>

.entry-content h2 {
float: page top left;
width: 6gr;
height: 1gr;
margin-left: -30px;
ich }
.entry-content img.photo {
float: page bottom left;
float-offset: 4gr 1gr;
}

Advanced Layout
Aims to fully separate visual layout
order from a document’s content
by defining “slots” in a grid in which
content can flow or be placed,
or that remain empty — all without
additional markup.

a b c d
e f g h
i j k l

a a c d
e e g g
i j k l

@ @ . .
e @ @ h
. j j @

Sele#ors
Refined sele#ors to target
an element based on an attribute
or position in the document flow
plus new pseudo-classes
and pseudo-elements.

Selectors
:nth-child(N) :nth-last-child(N)
:nth-of-type(N) :nth-last-of-type(N)
:last-child :first-of-type
:last-of-type :only-child
:only-of-type :root
:empty :target
:enabled :disabled
:checked :not(S)

:nth-child(N)
matches elements on the basis of
their positions within a parent
element’s list of child elements (from
beginning to end)

<tr class=\"alt\"></tr>
<tr></tr>
tr.alt td {
background: #ecffd9;
}

<tr></tr>
tr:nth-child(odd) td {
background: #ecffd9;
}

<tr class=\"high-rank\">…</tr>
<tr class=\"high-rank\">…</tr>
<tr class=\"high-rank\">…</tr>
<tr>…</tr>
tr.high-rank td {
background: #ecffd9;
}

<tr>…</tr>
tr:nth-child(-n+3) td {
background: #ecffd9;
}

:nth-last-child(N)
matches elements on the basis of
their positions within a parent
element’s list of child elements (from
end to beginning)

<tr>…</tr>
<tr class=\"low-rank\">…</tr>
<tr class=\"low-rank\">…</tr>
<tr class=\"low-rank\">…</tr>
tr.low-rank td {
opacity: .75;
}

<tr>…</tr>
tr:nth-last-child(-n+2) td {
opacity: .75;
}

:nth-of-type(N)
matches elements on the basis of
their positions within a parent
element’s list of child elements of the
same type

<p class=\"intro\">…</p>
<p>…</p>
p.intro {
background: #fafcf5;
font-size: 1.3em;
color: #060;
}

<p>…</p>
p:first-of-type {
background: #fafcf5;
font-size: 1.3em;
color: #030;
}

Resources

Resources
๏ A List Apart
http://alistapart.com
๏ SitePoint CSS Reference
http://reference.sitepoint.com/css
๏ CSS3.info
http://css3.info
๏ CSS Crib Sheet
http://mezzoblue.com/css/cribsheet/

The Art & Science of CSS
by Cameron Adams
Jina Bolton
David Johnson
Steve Smith
Jonathan Snook

Thank you!
Jina Bolton
sushiandrobots.com