Download as PDF, PPTX
Uploaded byColin Loretz
Intro to HTML & CSS
The document discusses HTML elements and CSS properties for styling web pages. It covers basic HTML tags for structure like <html>, <head>, <body>, <p>, <h1>-<h6>, <div>, <span>, <table>, <ul>, <li> as well as CSS properties for styling like font, color, background, padding, margin, float. It also introduces the box model and shorthand CSS properties.
Intro to HTML & CSS
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9. BROWSERS the bigfour
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. <html> <head> </head> </html>
- 16.
- 17. <html> <head> <title>Our Page</title> </head> </html>
- 18.
- 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>
- 22.
- 23.
- 24.
- 25. <br /> linebreak
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. <h1> Importantheading </h1> <h3> Less important heading </h3>
- 33.
- 34. <p> Sometext <small> some smaller text </small> </p>
- 35.
- 36. <div> <h3>Mysection</h3> <p>Lorem ipsum</p> </div>
- 37.
- 38.
- 39.
- 40.
- 41.
- 42. <ul> <li>item1</li> <li>item 2</li> </ul>
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50. <table> <thead> <th>Name</th> <th>Price</th> </thead> <tbody> <tr> <td>Latte</td> <td>$3.95</td> </tr> </tbody> </table>
- 51.
- 52.
- 53.
- 54. <div id =“intro”> Some text </div>
- 55.
- 56.
- 57. <div class =“product”> Some text </div>
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 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.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76. introducing the boxmodel
- 77. margin padding height width
- 78. padding: 5px 5px5px 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.
- 85.
- 86.
- 87. div { float: left; } div { float: right; }
- 88.
- 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.
- 99.
- 100.
- 101.
- 102.
- 103. background-color: black;
- 104.