CSS Workshop - The basics

Learn about concepts such as layouts and the box model, and understand CSS code with practical examples

Transcript

1. CSS! workshop Romain Prieto May 2013
2. 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
3. 2000   2010   1994 = first proposals 1996 = CSS1 spec 2000 = 1st browser with 99% CSS1 6  recommendations 11 candidates 30+ drafts
11. learnlayout.com   learn.shayhowe.com  
12. Toby  Melville  /  Reuters  
13. y  Killian  
14. Elements inline block inline inline inline inline inline inline block inline block
15. Floating inline inline inline inline float inline inline inline inline inline inline inline inline
16. Position: static static static static static static static
17. Position: relative static static static static static relative
18. Position: absolute & fixed fixed relative absolute page
19.          Monthly  plan              $49  /  month   #1   Name   Email   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.    
20. The box model padding = 5 border = 0 margin = 2
21. Box sizing width = 100 à internal width ? width = 100 à internal width + padding + border ? width  =  50%   width  =  50%   "content-box" "border-box"
23. #2 css rules How we apply styles to HTML elements
24. CSS Rules   selector  {    declaraMon;    declaraMon;   }         h1  {    color:  red;    font-­‐size:  16px;   }      
25. Fonts & colours background-­‐color:  white   color:  black   font-­‐size:  10px   font-­‐style:  italic   font-­‐family:  Arial   text-­‐align:  center   text-­‐transform:  uppercase   ...  
26. Layout (as seen 5 min ago) display:  block   posiMon:  absolute   margin:  10px   padding:  5px   border:  1px  solid  red   …    
27. 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
28. #3 selectors Let’s apply all these rules to actual elements!
29. Selectors = where to apply  element    #id    .class    :pseudo-­‐class   h1   header    h1   header    >    h1     #arMcles    .summary    p   #arMcles    .popular.recent   #arMcles    li:odd    
31. 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>
32. 1   1   1   0   elements   classes   IDs   inline   , , ,
33. Let’s recap - inline / block / inline-block - floats - position static / relative / absolute - box-sizing - rule declaration - selectors - specificity
35. git@github.com:rprieto/css-­‐ workshop.git  
39. Chrome inspector
40. emmet.io
41. emmet.io