CSS in all its Glory

2,322 views
2,216 views

Published on

A basic overview for people interested in getting started with CSS.

Published in: Design, Technology, Education
2 Comments
14 Likes
Statistics
Notes
No Downloads
Views
Total views
2,322
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
126
Comments
2
Likes
14
Embeds 0
No embeds

No notes for slide

CSS in all its Glory

  1. 1. 1
  2. 2. 2
  3. 3. 3
  4. 4. 4
  5. 5. 5
  6. 6. 6
  7. 7. 6 1 + = holy crap 7
  8. 8. 8
  9. 9. 9
  10. 10. 10
  11. 11. 11
  12. 12. 12
  13. 13. 13
  14. 14. 14
  15. 15. 15
  16. 16. I hope you know HTML 16
  17. 17. The most important thing you need to know... 17
  18. 18. 18
  19. 19. The Box Model Margin 10 Border 5 Padding 10 10 5 10 200 x 80 10 5 10 10 5 10 19
  20. 20. width padding-left padding-right border-left + border-right Calculated Width 20
  21. 21. Width = 250px Margin 10 Border 5 Padding 10 10 5 10 200 x 80 10 5 10 10 5 10 21
  22. 22. height padding-top padding-bottom border-top + border-bottom Calculated Height 22
  23. 23. Height = 130px Margin 10 Border 5 Padding 10 10 5 10 200 x 80 10 5 10 10 5 10 23
  24. 24. Block Level Elements Parent Element width:auto If no width declared all block level elements within the parent element will be set to 100%. 24
  25. 25. Block Level Elements Parent Element width:200px If you declare a width...well your block level element will have that width, regardless of the parent element 25
  26. 26. Absolute Elements Parent Element well hello there well hello there...the box expands If you don’t specify a width, the box will expand with the content. It will expand until 100% of the parent, then wrap. 26
  27. 27. Floated Elements Parent Element well hello there well hello there...the box expands Mimics the behavior of positioned elements. Doesn’t depend on relative positioning 27
  28. 28. Rule of Thumb Specify the width on: • floated elements • positioned elements either fixed or absolute 28
  29. 29. Inline Elements Parent Element well hello there well hello there...the box expands well hello there well hello there...the box expands Just really long, skinny boxes 29
  30. 30. CSS Rule Set 30
  31. 31. CSS Rule Set Tells a browser how to render HTML boxes Selector Declaration Block Declaration Declaration Property Value Property Value body { color :black ; padding:1em ; } 31
  32. 32. CSS Rule Set Tells a browser how to render HTML elements Selector Declaration Block Declaration Declaration Property Value Property Value body { color :black ; padding:1em ; } 32
  33. 33. Selector Declaration Block Declaration Declaration Property Value Property Value body { color :black ; padding:1em ; } Selector: “selects” an HTML element that should be affected by a rule set 33
  34. 34. Selector Declaration Block Declaration Declaration Property Value Property Value body { color :black ; padding:1em ; } Declaration Block: anything between the curly brackets 34
  35. 35. Selector Declaration Block Declaration Declaration Property Value Property Value body { color :black ; padding:1em ; } Declaration: Tells the browser how to draw any element on a page that is selected 35
  36. 36. Selector Declaration Block Declaration Declaration Property Value Property Value body { color :black ; padding:1em ; } Property: The aspects of the HTML element that you are choosing to style. 36
  37. 37. Selector Declaration Block Declaration Declaration Property Value Property Value body { color :black ; padding:1em ; } Value: The exact style you want to set for the property 37
  38. 38. All together now Declarations can be grouped. p{ margin: 10px; padding: 20px; } 38
  39. 39. All together now Selectors can be grouped. h1, h2, h3 { padding:10px; } 39
  40. 40. CSS Shorthand 40
  41. 41. Font h1{ font-family: Arial; font-size: 100%; font-style: normal; font-variant: small-caps; font-weight: bold; line-height:120%; } 41
  42. 42. Font h1{ font: bold small-caps 100%/120% Arial; } 42
  43. 43. Font style variant size line-height font-family font: bold small-caps 100% 120% Arial ; 43
  44. 44. Margin/Padding p{ margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px; padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px; } 44
  45. 45. Margin/Padding T L R B margin: 1px 2px 3px 4px; padding: 1px 2px 3px 4px; 45
  46. 46. Margin/Padding T R B L margin: 1px 2px 3px 4px; padding: 1px 2px 3px 4px; 46
  47. 47. Margin/Padding T R/L B margin: 1px 2px 3px 2px; padding: 1px 2px 3px 2px; T/B R/L margin: 1px 2px 1px 2px; padding: 1px 2px 1px 2px; 47
  48. 48. Margin/Padding T/R/B/L margin: 1px 1px 1px 1px; padding: 1px 1px 1px 1px; 48
  49. 49. Comments /* Comment */ margin: 1px 2px 3px 4px; /*padding: 1px 2px 3px 4px;*/ 49
  50. 50. Document Tree 50
  51. 51. <body> <div id="container"> <h1>This is the document tree</h1> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum <strong>dolor</strong> sit amet</p> </div> <div id="nav"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> </body> 51
  52. 52. body div div h1 p p ul em li li li 52
  53. 53. body div div h1 p p ul em li li li Ancestor Any element that’s connected but further up the document tree, no matter how many level higher. 53
  54. 54. body div div h1 p p ul em li li li Descendant Any element that’s connected but lower down the document tree, no matter how many levels lower. 54
  55. 55. body div div Parent h1 p p ul Child em li li li Parent Element that is directly above and connected to an element in the document tree 55
  56. 56. body div div Parent h1 p p ul Child em li li li Child Element that is directly below and connected to an element in the document tree 56
  57. 57. body div div h1 p p ul em li li li Siblings An element that shares the same parent with another element 57
  58. 58. Specificity Determines which CSS rule is applied to an element by a browser 58
  59. 59. Basic Specificity Inline Style > #ID > .Class > Element 59
  60. 60. Selectors 60
  61. 61. Type Selectors li{color: red;} body div div h1 p p ul em li li li 61
  62. 62. Class Selectors .red{color: red;} body div div h1 p p.red ul em li li li.red 62
  63. 63. Class + Type Selectors p.red{color: red;} body div div h1 p p.red ul em li li li.red 63
  64. 64. Rule of Thumb Don’t use classes to style HTML elements to look like other elements <div class="heading">Main Heading</div> .heading{ font-weight: bold; font-size: 140%; } 64
  65. 65. Rule of Thumb Do HTML elements that already exist <h1>Main Heading</h1> h1{ font-size: 140%; } 65
  66. 66. Think before you class 1. Is there an existing HTML element that I can use instead? 2. Is there a class or ID further up the document tree that can be used? 66
  67. 67. ID Selectors #nav{color: red;} body div div h1 p p.red ul nav # em li li li.red 67
  68. 68. ID vs .class ID’s • They are unique • Each element can only have one ID • Each page can only have one element with the same ID • ID’s have special browser functionality • Javascript loves ID’s <div id="nav header"></div> 68
  69. 69. ID vs .class Classes • They aren’t unique • The same class can be used on multiple elements • You can use multiple classes on the same element <div class="nav header"></div> 69
  70. 70. Descendant Selectors p em{color: red;} body div div h1 p p.red ul nav # em li li li.red 70
  71. 71. Universal Selectors * {color: red;} body div div h1 p p.red ul nav # em li li li.red 71
  72. 72. Child Selectors div > em {color: red;} body div div h1 p p.red ul nav em # em li li li.red 72
  73. 73. Adjacent Sibling Selectors h1 + p {color: red;} body div div h1 p p.red ul nav em # em li li li.red 73
  74. 74. Attribute Selectors 4 Types 74
  75. 75. Attribute Selectors Select based on the attribute <img src="image.png" width="100" height="100" title="Main Image" alt="Main Image"/> img[title] { border: 1px solid #000; } img[width] { border: 1px solid #000; } img[alt] { border: 1px solid #000; } 75
  76. 76. Attribute Selectors Select based on the attribute’s value <img src="image.png" width="100" height="100" title="Main Image" alt="Main Image"/> img[src="image.png"] { border: 1px solid #000; } 76
  77. 77. Attribute Selectors Select based on the space separated instances of a value <img src="image.png" width="100" height="100" title="Main Image" alt="Main Image"/> img[alt~="Main"] { border: 1px solid #000; } 77
  78. 78. Attribute Selectors Select based on the hyphen separated instances of a value <img src="image.png" width="100" height="100" title="Main Image" alt="Main Image"/> img[alt|="Main"] { border: 1px solid #000; } 78
  79. 79. :Pseudo Classes 79
  80. 80. Most Common :link :visited :hover :active 80
  81. 81. :first-child li:first-child {color: red;} body div div h1 p p.red ul nav em # em li li li.red 81
  82. 82. :first-line p:first-line {color: red;} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum purus non risus porttitor convallis. In vitae nulla id felis. 82
  83. 83. :before and :after p:before {content: “ extra stuff”} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum purus non risus porttitor convallis. In vitae nulla id felis. extra stuff 83
  84. 84. CSS3 Selectors 84
  85. 85. Most Common :link :visited :hover :active 85
  86. 86. :first-child li:first-child {color: red;} body div div h1 p p.red ul nav em # em li li li.red 86
  87. 87. :first-line p:first-line {color: red;} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum purus non risus porttitor convallis. In vitae nulla id felis. 87
  88. 88. :before and :after p:before {content: “ extra stuff”} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum purus non risus porttitor convallis. In vitae nulla id felis. extra stuff 88
  89. 89. CSS 3 I shall now cheat...I’m also lazy http://www.css3.info/ 89
  90. 90. CSS Tricks 90
  91. 91. • Absolute Positioning (z-index) • Multi-Column Layouts with floats • .clearfix • Image Sprites • Image Replacement • Center align elements • display:none vs visibility:hidden • Multiple background images 91
  92. 92. A Clean Stylesheet 92
  93. 93. ? http://twitter.com/killermoo http://bermonpainter.com http://facebook.com/bermon 93
  94. 94. Books Designing with Transcending CSS CSS Mastery Web Standards Andy Clarke Andy Budd Jeffry Zeldman 94

×