css workshop
TRANSCRIPT
CSS!workshop
Romain Prieto May 2013
Hands-off
Hands-on
30min
1h
History of CSS !Layout principles !Show me the code
3 examples of real life CSS !Building a blog from scratch
2000 2010
1994 = first proposals
1996 = CSS1 spec
2000 = 1st browser with 99% CSS1
6 recommendations 11 candidates 30+ drafts
learnlayout.com
learn.shayhowe.com
Toby Melville / Reuters
Jerry Killian
Elements
inline
block
inline inline inline
inline inline inline block inline
block
Floating
inline inline inline inline float
inline inline inline inline
inline inline inline inline
Position: static
static static
static static static
static
Position: relative
static static
static static static
relative
Position: absolute & fixed
fixed
relative absolute
page
Monthly plan
$49 / month
#1 Name
Heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
The box model
padding = 5 border = 0 margin = 2
Box sizing
width = 100 à internal width ? width = 100 à internal width + padding + border ?
width = 50% width = 50%
"content-box" "border-box"
#2 css rules
How we apply styles to HTML elements
CSS Rules
selector {
declaraMon; declaraMon;
}
h1 {
color: red; font-‐size: 16px;
}
Fonts & colours
background-‐color: white color: black font-‐size: 10px font-‐style: italic font-‐family: Arial text-‐align: center text-‐transform: uppercase ...
Layout (as seen 5 min ago)
display: block posiMon: absolute margin: 10px padding: 5px border: 1px solid red …
color: #000; width: 200px; color: black; width: 50%;
border-‐boYom-‐width: 1px; border-‐boYom-‐color: red; vs. border: 1px solid red; box-‐shadow: 1px 0px 3px 5px rgba(0,0,0,0.3);
Simple properties
Shorthand properties
#3 selectors
Let’s apply all these rules to actual elements!
Selectors = where to apply
element #id .class :pseudo-‐class
h1 header h1 header > h1 #arMcles .summary p #arMcles .popular.recent #arMcles li:odd
Specificity
h1 { color: black; font-size: 1em; } h1.big { color: blue; font-size: 2em; } #title h1.big { color: red; }
<div id=“title”> <h1 class=“big”>hey</h1> </div>
1 1 1 0
elements classes IDs inline
, , ,
Let’s recap
- inline / block / inline-block - floats - position static / relative / absolute - box-sizing - rule declaration - selectors - specificity
[email protected]:rprieto/css-‐workshop.git
Chrome inspector
emmet.io
emmet.io