Intro to CSS

456 views
391 views

Published on

Slides from my Intro to CSS class. More info at http://randyoest.com.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
456
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
33
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Intro to CSS

  1. 1. Intro to CSS
  2. 2. Randy Oest Manager of Digital Design Williams Randall Marketing ! @amazingrando
  3. 3. Why Learn CSS? 1. Running a blog on a CMS and want to tweak things 2. Working with a developer and want to understand how to talk with them 3. Web designer looking to understand how things get built
  4. 4. What We’ll Learn 1. What is CSS 2. How to speak CSS 3. How to apply it 4. Where to find out more info
  5. 5. If HTML is the Skeleton of Web pages…
  6. 6. CSS is the muscle and skin.
  7. 7. CSS Needs HTML CSS is used to style elements, giving them form.
  8. 8. HTML Elements <p>Paragraph …</p>   <div  class=“nav”>…</div>   <h1  id=“title”>Headline</h1>  
  9. 9. CSS Needs HTML Selectors are used to target styles.
  10. 10. Examples of Selectors <p>Paragraph …</p>   p  {  …  }  
  11. 11. Examples of Selectors <div  class=“nav”>…</div>   .nav  {  …  }  
  12. 12. Classes Class names always start with a period. .class
  13. 13. IDs IDs always start 
 with a hash. There can only be one on a page. #id
  14. 14. Think of classes as your name and nicknames, e.g. Randy, Amazing Rando, Hey You… Think of IDs as your unique social security or credit card numbers.
  15. 15. Multiple Selectors <h1  id=“title”>Headline</h1>   h1#title  {  …  }   No spaces!
  16. 16. Specificity When there is a style conflict, IDs trump classes, and classes trump HTML elements
  17. 17. Nested Elements <div  id=“feature”>     <img  src=“…”  />     Some Text … </div>
  18. 18. Nested Elements <div  id=“feature”>     <img  src=“…”  /> #feature  img  {  …  } Now there is a space.
  19. 19. .class  {     color:  #fff;     padding:  10px;   } Properties & Values Property Value
  20. 20. PX: Pixels %: Percentage EM: Relative unit, equal to the current font size Common Size Units
  21. 21. EMs, being relative units, can get complicated quickly when you nest them. Warning about EMs
  22. 22. 1. External File 2. Internal, using the <style> tag 3. Inline styles Getting CSS into the HTML
  23. 23. Put this inside the <head> <link  rel="stylesheet"   href="file.css"> External File
  24. 24. Put this inside the <head> <style  type="text/css">     …  your  styles  …   </style> Internal
  25. 25. <h1  style=“color:#fff;”>     Headline   </h1> Inline HTML
  26. 26. <interlude>
  27. 27. Obligatory Baby Pictures
  28. 28. </interlude>
  29. 29. Box Model
  30. 30. Elements of the Box
  31. 31. An element’s size is equal to: Width (or Height) + Padding 
 + Border + Margin = Total Size The Box Model is Tricky
  32. 32. .box  {    width:  200px;    padding:  10px;    border:  5px;    margin:  15px;   }
  33. 33. So if we plug in values: Width (200px) + Padding (10px * 2 sides)
 + Border (5px * 2 sides) + Margin (15 px * 2 sides) = Total Size (260px) The Box Model is Tricky
  34. 34. There is a Better Way
  35. 35. Use a Different 
 Box Model
  36. 36. *,  *:before,  *:after  {   -­‐webkit-­‐box-­‐sizing:  border-­‐box;   -­‐moz-­‐box-­‐sizing:  border-­‐box;   box-­‐sizing:  border-­‐box;   } Magic Bullet
  37. 37. selector  {   -­‐webkit-­‐box-­‐sizing:  border-­‐box;   -­‐moz-­‐box-­‐sizing:  border-­‐box;   box-­‐sizing:  border-­‐box;   } Fixing A Single Item
  38. 38. An element’s size is equal to the width size. Border Box is NOT Tricky
  39. 39. Content-Box (Default) Border-Box (Good!)
  40. 40. padding-­‐top:  10px;   padding-­‐right:  5px;   padding-­‐bottom:  10px;   padding-­‐left:  5px;   OR padding:  10px  5px  10px  5px; Shorthand
  41. 41. Starts at NOON 
 and goes clockwise. padding:  top  right  bottom  left; Shorthand
  42. 42. padding:  top+bottom  right+left;   padding:  10px  5px; Even More Shorthand
  43. 43. The Display Property
  44. 44. Block: <h1>,  <p>,  <div>   Inline: <a>,  <span>,  <b>,  <strong> The Display Property
  45. 45. a  {    display:  block;   }   The Display Property
  46. 46. There are many more exotic display types, such as inline-­‐block, none, etc. The Display Property
  47. 47. Flow
  48. 48. Floats
  49. 49. img  {    float:  left;   }   The Display Property
  50. 50. Positioning can change an element in the flow.
  51. 51. Positioning Parent Element position:  static
  52. 52. img  {    position:  static;   }   Positioning This is the default, no need to write it
  53. 53. Positioning Parent Element position:  fixed Fixed in relation to the browser.
  54. 54. img  {    position:  fixed;    top:  0px;      left:  0px;   }   Positioning
  55. 55. top:  0px;     right:  0px;   bottom:  0px;   left:  0px;   Positioning
  56. 56. Positioning Parent Element position:  relative
  57. 57. img  {    position:  relative;    top:  -­‐10px;      left:  -­‐200px;   }   Positioning
  58. 58. Positioning Parent Element position:  absolute position:  static
  59. 59. img  {    position:  absolute;    top:  0px;      left:  0px;   }   Positioning
  60. 60. Absolute positioning looks for the parent with a position other than static.
  61. 61. Positioning
  62. 62. Positioning Parent Element position:  absolute position:  relative
  63. 63. img  {    position:  absolute;    top:  0px;      left:  0px;   }   Positioning
  64. 64. A Quick Note About Mobile
  65. 65. Most CSS that you write for mobile is just CSS.
  66. 66. Percentages and relative units, like EMs are better than pixels, which are static width.
  67. 67. @media  all  and  (max-­‐width:  699px){     …  styles   } Media Query
  68. 68. Further Learning RandyOest.com/CSS

×