Download as PDF, PPTX
Uploaded byColin Loretz
PDF, PPTX815 views
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.
Recommended
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fcodedagentsdeck-251215155422-5497c599-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
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 5px10px 10px 50px 10px 10px 100px 5px 5px
- 81.HEIGHTHeight + padding-top+ padding-bottom + margin-top + margin-bottom 50px + 5px + 5px + 5px + 5px = 70px WIDTHWidth + padding-left + padding-right + margin-left + margin-right50px + 10px + 10px + 10px + 10px = 90px
- 82.div {margin: top right bottom left;}div { margin: 5px 10px 5px 10px;}
- 83.Shorthanddiv {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.