3

Julia
Evans
 V/hdts -this?
I wrote this zine because, after 15 years of being confused about
CSS, I realized I was still missing a lot of basic CSS knowledge.
Learning the facts in this zine helped me go from:

UGH my website o0/ hmm, that looks

... hours pass ...

have no idea why

This zine also comes with i examples; for you to try out. They're at:

https://css-examples.wizardzines.com
Panels which have examples you can try are labelled fpA
 table of contents
ATTiTudf LAYOUT GEfTTlMG FANCV
CSS isn't easy........................ H inline vs block.............12 hiding elements....... 20
CSS isn't design.................... 5 the box model............. 13 stacking contexts.... 21
CSS specifications................. 6 padding & margin.... IM CSS variables............22
backwards compatibility..... 7 borders...................... IS transitions................23
flexbox basics.......... 16
BASICS
CSS grid areas!....... 17 MAKING IT WOkK
selectors................................. 8
centering................... 18 media queries............2H
specificity.............................. .9 position: absolute....... ig the CSS inspector.......25
default stylesheets................10
testing checklist...... 26
units.........................................II
 CSS seems simple and it is easy for but website layout is
at first simple tasks not an easy problem
h2 {
[Toe®-R* ^*" 1—
he cider
font-size: a layout this needs to
like this is
QI
ok this simple to aO many screen
is implement! sizes!
1 ~

and all browsers accept that writing

surprising have bugs CSS is gonna take time
''setting overflow: hidden; 'I don't support^
(If I'm patient I can\
on an inline-block element flexbox for j
changes its vertical ). <summary> / fix all the edge
alignment . elements J<- cases in my CSS and
make my site look
ok fine great everywhere!/
css 2.1
 CSS != design
web design is writing CSS remember that they're
really hard is also hard 2 different skills
(nmm,/ihaveNO^
wow, forms are wayl
more complicated (IDEA what I want,
than I thought 5^ does flexbox work Sthis site to look
again? r NZ / like, maybe that's
I f my problem and J
/\ knot CSS ...

CSS is easier when you usually you have to sketching a design in

have a good design adjust the design advance: can help!

oh right, I didn't [ -HWe

think about how even a simple
that menu should \ oca sketch can
help you think!
work on desktop
^OQ
design
 css specifica.fi onS
CSS has there used to be just today, every CSS
one specification feature has its own
specification
hello, this is how \ it's called "CSS 2" you can find them all at
max-width works in and I still like to
CSS 2-' https://www.w3.org/TR/CSS/
excruciating detail reference it to
there are dozens of specs,
learn the basics
for example: colors,
flexbox, and transforms

major browsers usually levels new features take

obey the spec time to implement
CSS versions are called
but sometimes they "levels". <g *
have bugs ^3^ ♦https://caniuse.com *
new levels only add new can tell you which
features. They don't browser versions
change the behaviour of support a CSS feature
existing CSS code
 backwards compatibility
browsers support old this makes CSS hard ... but it means it's
HTML ■+ CSS forever to write... worth the investment
I spent DAYS getting
this CSS to work

I'll make sure it

keeps working
forever!
brouser

your CSS doesn't newer features are

have to support often easier to use
browsers from 19A8
what people expect from a
just test that your website has changed a LOT
CSS works on the since WS. Newer CSS
browsers that your features make responsive
users are using! design easy
 a -Pev/ CSS selectors
Cnow that we have the\ div #welcome
right attitude, let's j
XI/ | move on to how CSS J matches div elements # matches elements by id
1 (actually works! <div id="welcome">
<div>

.btn div .btn div.btn

. matches elements by class match every .btn element match divs with class "btn"
that's a descendent of a div
<a class="btn"> <div class="btn">

div > .btn .btn, #welcome [hrefA="http"]

match every .btn element matches both .btn and match a elements with a href
that's a direct child of a div #welcome elements attribute starting with http

:checked a:hover tr:nth-child(odd)

matches if a checkbox or matches a elements that match alternating tr elements
radio button is checked the cursor is hovering over (make a striped table!)
 Speci-f icif
different rules can set CSS uses the "most CSS can mix properties
the same property specific" selector that from different rules
a:visited { matches an element a:visited {
color: purple; '*X^ich In our example, the browser color: purple; it'll use this
font-size: 1.2em;x . will use color: orange because font-size: 1.2em; font-size
one gets
chosen? IDs (like #start-link) are
#start-link { . but use this
#start-link { / more specific than color because
color: orange; color: orange;
pseudoclasses (like :visited) #start-link is
more specific

how CSS
a selector with a selector with .classes a selector with an #id
element names loses to or :pseudoclasses loses to ,#header a {
body div span a .sidebar .link { / color: purple;
color: red; color: orange; J
'! important is very
hard to override,
loses to /an inline style loses to an !important rule* which makes life
( style="color: green;"J color: blue !important; hard for your
future self!
 de4o<oW sA^esheets io
every browser has a different browsers you can read the
default stylesheet have different defaults default stylesheet
(aka "user agent stylesheet")
a small sample from the Firefox's default
Firefox default stylesheet: buttons t forms'^
stylesheets are at:
hi { have some of the
font-size: 2em; biggest differences resource://gre-resources/
font-weight: bold;
}

every property also has a CSS property can be set in 5 ways

a default "initial value" lowest priority
(0 the initial value
the initial value (defined
in the spec) is what's © the browser's default stylesheet
used if no stylesheet has (5) the website's stylesheets and
set anything. For example,
user stylesheets
background-color's initial
® inline styles set with HTML/3S
value is transparent highest priority
 um
CSS has 2 Kinds of units: rem em
absolute & relative the root element's the parent element's
font size font size
absolute: px, pt, pc, 1rem is the same .child {
in, cm, mm everywhere in the font-size: 1.5em;
document, rem is a parent
relative: em, rem, good unit for setting font size
vw, vh, % child is I.5*
font sizes!

0 is the same 1 inch = A6 px rem & em help with

in all units accessibility
on a screen, 1 CSS "inch"
.btn { .modal {
isn't really an inch, and
margin: 0; width: 20rem;
1 CSS "pixel" isn't really
a screen pixel, } y
also, 0 is different from none. look up "device pixel this scales nicely if the user
border: 0 sets the border width ratio" for more. increases their browser's
and border: none sets the style default font size
 inline vs block
HTML elements default
to inline or block
example inline example block
elements: elements:
<a> <span> <p> <div>
<strong> <i> <ol> <ul> <li>
<small> <abbr> <h1> - <h6>
<img> <q> <blockquote>
<code> <pre>

inline elements ignore display can force

width & height* an element to be
inline or block
Setting the width is impossible,
display determines 2 things:
but in some situations, you can
use line-height to change the (1) whether the element itself is
height inline, block, inline-block, etc

*img is an exception to this: look

(2) how child elements are laid out
up "replaced elements" for more
(grid, flex, table, default, etc)
 -Vhe box model 13
every HTML element boxes have padding, width & height don't
is in a box borders, and a margin include any of those

1
<div class="1">
<div class="2" /> __ 2
<div class="3" />
</div>

margins are allov/ed(^ - box-sizing: border-box;^ padding & border are

to overlap sometimes includes border + padding inside the element,
in the vzidth/height margin is outside
the browser
margin
combines these
top/bottom margins
border
...... . For example, clicking on an
padd m3 ...J ;:
heiaJnV ■ /■
./. element's border/padding
look. up
"margin collapse"
triggers its onclick event,
to learn more (Sy-? but clicking on the margin
doesn't.
 borders
border has 3 border-style border-{side}
components options
border: 2px solid black; solid you can set each side's
dotted
border separately:
is the same as
!I dashed double border-bottom:
border-width: 2px;
2px solid black;
border-style: solid; + lots more
border-color: black; (inset, groove, etc)

border-radius box-shadow outline

border-radius lets you lets you add a shadow outline is like border, but it
have rounded corners to any element doesn't change an element's
shadow size when you add it
border-radius: 10px;
outlines on :hover/
color :active help with
border-radius: 50%; accessibility: with
/ element
will make a square box-shadow: 5px 5px 8px black; keyboard navigation,
into a circle! / T \ you need an outline to
x offset y offset blur radius
see what's focused
 flexbox basics 16
display: flex; flex-direction: row; flex-wrap: wrap;

set on a parent element

it •s
to lay out its children
with a flexbox layout.
by default, children are
by default, it sets laid out in a single row.
flex-direction: row; the other option is will wrap instead of shrinking
flex-direction: column everything to fit on one line

justify-content: center; align-items: center; you can nest flexboxes

--------------- display: flex-------------

it <9

horizontally center vertically center (or

(or vertically if you've set horizontally if you've set
flex-direction: column) flex-direction: column)
CSS area^I
grid-template-areas (ets
you define your layout in
an almost visual v/ay
grid-template-areas:
"header header"
"sidebar content";
header header
I think of
it like this: Sidebar content"

3. set grid-area
.top {grid-area: header}
.side {grid-area: sidebar}
.main {grid-area: content}
,+op
resuH ■'
. side . rnAi'n
 Center incj
center text with center block elements margin: auto
text-align with margin: auto only centers horizontally

h2 { example HTML: .child {

text-align: center; <div class="parent">
width: 400px; f
<div class="child"> not-
} margin: auto; cenVeiw
</div>
</div> 1

--------------------------------------------------------------------------------------- y tk>
vertical centering is easy with flexbox or grid%J^ it's ok to use a flexbox
here's how with grid: and with flexbox: or grid just to center
one thing
.parent { -Parent {
.paijent (display: grid)
display: grid; display: flex;
place-items: center; '
j .child {
margin: auto; /
} .child (centered!)
 posi+ioH: absolute
position: absolute; top, bottom, left, right
doesn't mean absolutely positioned on the page: will place an absolutely
it's relative to the "containing block" positioned element
the "containing block" is Here's some typical CSS:
the closest ancestor with #square {
a position that isn't set position: absolute;
to static (the default top: 1em; left: 1em;
value), or the body if }
#parent { «-#parent
there's no such ancestor. position: relative;
(containing block)

-I
J this makes #parent the containing block.

left: 0; right: 0; width: 100%; absolutely positioned

left: 0; right: 0; width: 100%; elements are taken out
of the normal flow

left and right borders the box sticks out because

are both Opx away width doesn't include
from containing block borders by default
 there are many ways display: none; visibility: hidden;
to make an element
other elements will move the empty space will
disappear
to fill the empty space stay empty
[which one to useA
depends: do you <9 A <9
want the empty / ^visibility: hidden;
display: none;
space it left to J
filled? A

opacity: 0; how to slowly fade out z-index

z-index sets the order
like visibility: hidden, #fade:hover { of overlapping positioned
but you can still click, on transition: all 1s ease; elements
the element & it'll still be visibility: hidden;
visible to screen readers. opacity: 0;,^
Usually visibility: hidden 1 set the opacity
is better. just so that the
transition works
a stacking context is setting z-index creates stacking contexts
(ike a Photoshop layer a stacking context are confusing
#modal { You can do a lot without
z-index: 5; understanding them at all.
position: absolute; But if z-index ever isn't
working the way you expect,
by default, an element's
that's the day to learn
children share its this is a common way to
about stacking contexts :)
stacking context create a stacking context
 css variables
duplication is define variables in use variables with
annoying any selector var()
body {
°/ugh, I have --text-color: #f79;
7color: #f79 set in ' body {
} ^applies to
? 27 places and now I #header {everything color: var(--text-color);
( need to change it in > J.
--text-color: #c50;
127 places S } ^applies to children variables always
start with --
of #header

do math on them with you can change a changes to variables

calc() variable's value in apply immediately
Javascript
#sidebar { set --text-color
width: calc( let root = to red
var(--my-var) + lem document.documentElement;
); root.style.setProperty( everything
} '--text-color', 'black'); using it is
css
tenderer
 ■transitions
----------------------------------- y Tn>
an element's computed new styles change the ... unless you set thew^
style can change element instantly... transition property
a {
2 ways this can happen: color: blue;
a:hover {
Q pseudo-classes color: red; transition: all 2s;
(like : hover) } t } ('"will fade
the element will a:hover { ^from blue to
® Javascript code turn red right color: red; red over 2s
el.classList.add('x') away

transition has 3 parts not all property changes ...but there are dozens
can be animated.... of properties that can
transition: color 1s ease; list-style-type: square; if it's a number or color, it
can probably be animated!
/I don't know
which CSS . .. timing how to animate font-size: 14px;
properties durat'on
function that, sorry! rotate: 90deg;
to animate CS5
fenderer width: 20em;
 medico queries 24
media queries let you max-width & min-width print and screen
use different CSS in @media (max-width: 500px) { screen is for computer/
different situations // CSS for small screens mobile screens
@media media } print is used when
/^footer c~ query printing a webpage
@media (min-width: 950px) {
display: none A
// CSS for large screens there are more: tv, tty,
____
} speech, braille, etc
} CSS to apply

accessibility queries you can combine the viewport meta tag

media queries <meta name="viewport"
you can sometimes find
out a user's preferences it's very common to write content="width=device-width,
with media queries something like this: initial-scale=l ">

examples: Your site will look bad on mobile

@media screen and
if you don't add a tag like this
prefers-reduced-motion: reduce (max-width: 1024px) to the <head> in your HTML.
prefers-color-scheme: dark
Look it up to learn more!
 ■the CSS inspector is
all major browsers see overridden edit CSS properties
have a CSS inspector properties
element { ^le+s Bou change this
j element's properties
usually you can get to it button {

by right clicking on an display: inline-block; button {

element and then "inspect color:—var(--orange); display: inline-block;
element, but sometimes } border: Ipx solid black,
there are extra steps i
]
/*
this lets you change the
border of every <button>!

see computed styles ... and LOTS more

different browsers
have different tools!
For example, Firefox
has special tools for
debugging grid/flexbox
 res-kina checklist m>

Finally, it's important to test your site with different browsers, screen
sizes, and accessibility evaluation tools.
browsers sizes accessibility
□ Chrome □ small phone (300px wide) □ colour contrast

□ Safari □ tablet (~700px) □ text size

□ Firefox □ desktop (~1200px) □ keyboard navigation

□ maybe □ works with a

others! screen reader

the most important performance

thing is to know your
users! Check your
□ fake a slow/high latency
analytics: if 10% of
network connection!
your users are using IE,
test your site on IE!
 -thanks -for reading
CSS is a HUGE topic and there's a tot more to learn than what's in this zine.
Here are some of my favourite CSS resources:

QCSS Tricks (css-tricks.com) <7Can I USS... (caniuse.com)

Hundreds of helpful blog posts and Tells you which browser versions (and
incredible guides, like their guides what likely % of your users) have
to centering & flexbox. support for each CSS feature.

<7V/3 (w3.org/TR/CSS)
Mozilla Developer Network
(developer.mozilla.org)
The CSS specifications. Can be
My favourite reference for useful as a reference too!
CSS, JS, HTML, and HTTP

____________ [credits
Cover art: Vladimir Kasikovic ‘ ■
Editing: Dolly Lanuza, Kamal Marhubi
Technical review: Melody Starling
and thanks to all the beta readers V
 V -VhiS?
more ocV
★ v/izardzinescom <