Intro to HTML & CSS
•
1 like•804 views
Slides from the Reno Collective University introduction to HTML & CSS workshop.
Recommended
More Related Content
Similar to Intro to HTML & CSS
Similar to Intro to HTML & CSS (20)
More from Colin Loretz
More from Colin Loretz (11)
Recently uploaded
Recently uploaded (20)
Intro to HTML & CSS
- 2. WEB 101 HTML & CSS
- 4. CODA
- 6. TExTMATE
- 8. DREAMWEAVER
- 9. BROWSERS the big four
- 12. <html> html tag
- 13. <html> </html>
- 15. <html> <head> </head> </html>
- 17. <html> <head> <title>Our Page</title> </head> </html>
- 19. <html> <head> <title>Our Page</title> </head> <body> </body> </html>
- 20. <!-- # --> comments
- 21. <html> <head> <title>Our Page</title> </head> <body> <!-- code body here --> </body> </html>
- 24. <br> line break
- 25. <br /> line break
- 27. <h1> heading tag
- 28. <h2> heading tag
- 29. <h3> heading tag
- 30. <h4> heading tag
- 31. <h5> heading tag
- 32. <h1> Important heading </h1> <h3> Less important heading </h3>
- 33. <small> small font style tag
- 34. <p> Some text <small> some smaller text </small> </p>
- 36. <div> <h3>My section</h3> <p>Lorem ipsum</p> </div>
- 39. BUILD TIME
- 41. <li> list item
- 42. <ul> <li>item 1</li> <li>item 2</li> </ul>
- 47. <tr> table row
- 48. <td> table cell
- 50. <table> <thead> <th>Name</th> <th>Price</th> </thead> <tbody> <tr> <td>Latte</td> <td>$3.95</td> </tr> </tbody> </table>
- 52. ids
- 53. singular
- 54. <div id = “intro”> Some text </div>
- 55. classes
- 56. many
- 57. <div class = “product”> Some text </div>
- 58. SEMANTIC WEB
- 59. less > MORE
- 60. SELF documenting
- 61. BUILD TIME
- 62. ADDING STYLE
- 63. stylesheets
- 64. .css files
- 65. selectors
- 66. h2 { ... } li { ... } p { ... } by element
- 67. .products { ... } li.products { ... } li .products { ... } by class
- 68. #intro { ... } div#intro { ... } div #intro { ... } by ID
- 69. #intro ul.products li { ... } mix and match
- 70. style options
- 71. structure
- 72. height 50px;
- 73. width: 100px;
- 74. margin: 5px 5px 5px 5px
- 75. WAIT!
- 76. introducing the box model
- 77. margin padding height width
- 78. padding: 5px 5px 5px 5px
- 79. div { height: 50px; width: 100px; padding: 5px 10px 5px 10px; margin: 5px 10px 5px 10px; }
- 80. 5px 5px 10px 10px 50px 10px 10px 100px 5px 5px
- 81. HEIGHT Height + padding-top + padding-bottom + margin-top + margin-bottom 50px + 5px + 5px + 5px + 5px = 70px WIDTH Width + padding-left + padding-right + margin-left + margin-right 50px + 10px + 10px + 10px + 10px = 90px
- 82. div { margin: top right bottom left; } div { margin: 5px 10px 5px 10px; }
- 83. Shorthand div { margin: 5px 10px; } div { margin: 5px; }
- 84. OK!
- 85. BUILD TIME
- 86. FLOATS
- 87. div { float: left; } div { float: right; }
- 88. fonts
- 89. font-family: helvetica, arial, sans-serif;
- 90. font-size: 12px;
- 91. font-size: 12pt;
- 92. font-size: 1em;
- 93. font-size: 70%;
- 94. font-weight: bold;
- 95. font-weight: normal;
- 96. text-decoration: underline;
- 97. text-decoration: none;
- 98. color
- 99. color: black;
- 100. color: #000000;
- 101. color: #000;
- 102. color: rgb(0,0,0);
- 103. background-color: black;
- 104. BUILD TIME