Intermediate to Advanced CSS for Practical Peoples
Talk
Intro Slide
Introduce myself
People I’m stealing a lot from
Lullabot slide
Goal
Summary of entire talk
ToC for next section
Foreword
You don’t have to memorize CSS to be great at it
Remember the concepts and tools at your disposal
Make excuses to use, practice, or teach CSS
Read MDN docs, google“css how to … “ before resorting to JS layout/animation
Units
px
1px isn’t really 1 pixel anymore
With the advent of high density displays(e.g. retina screens) to avoid users needing a magnifying glass to read web sites, 1px is now based on how dense the screen is. Today, HDD displays tend to be 1.5x, 2x, or 4x.
I avoid pixels like the plague, rem’s 4 life
%
But % of what?(more on this later)
Text based units
em
NOT the width of an em dash
1em === font-size of current element
I ❤ em’s, but they can be tricky
rem
Just like em, but it’s the font size of the html element
I do not recommend changing the font size of html, if you want, change the size of body to effect the whole document
I highly recommend using rem instead of pixels, it is more mental overhead, but is sturdier IMO
ex
width of a lower case x in the font that renders 😲
ch
width of the number 0 in the font that renders 😲
vw
vh
vmin
vmax
Technically: mm, cm, in, pt, pc(all physical units probably best used in physical medium, e.g. print stylesheet)
Talk
Intro Slide
Introduce myself
People I’m stealing a lot from
Lullabot slide
Goal
Summary of entire talk
ToC for next section
Foreword
Units
Media queries
@media screen { /* Styles */}