HTML & CSS 2017
4 likes259 views
This document provides an introduction to HTML and CSS. It begins with an overview of the tools used for building websites, including text editors and browsers. It then covers the basic building blocks of HTML, such as the DOCTYPE, HTML, head, title, and body tags. It introduces other common HTML elements like headings, paragraphs, links, images, lists, and containers. The document also provides an introduction to CSS for styling HTML, including inline, internal and external CSS. It covers CSS selectors, properties and the box model. The document includes examples and exercises for working with HTML and CSS.
![[SUTD GDSC] Intro to HTML and CSS](https://cdn.slidesharecdn.com/ss_thumbnails/introtohtml-230215093923-21d7cfc6-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to HTML & CSS 2017 (20)
More from Colin Loretz (13)
Recently uploaded (20)
HTML & CSS 2017
- 6. TEXT EDITOR Download at http://atom.io
- 13. <html> html tag
- 14. <!DOCTYPE html> <html> The rest our our website will go here. </html>
- 18. <!DOCTYPE html> <html> <head> <title>Our First Page</title> </head> </html>
- 20. <!DOCTYPE html> <html> <head> <title>Our First Page</title> </head> <body> The rest of our website here </body> </html>
- 22. <!DOCTYPE html> <html> <head> <title>Our First Page</title> </head> <body> <!-- This is a comment --> The rest of our website here </body> </html>
- 28. … <h1>Largest Heading</h1> <h2>Largest Heading</h2> <h3>Largest Heading</h3> <h4>Largest Heading</h4> <h5>Largest Heading</h5> …
- 30. … <h1>Our headline</h1> <p>Some cool paragraph text.</p> <p>Another awesome paragraph with even more text.</p> …
- 31. <br> line break
- 32. … <h1>Our headline</h1> <p>An awesome paragraph with a line <br /> break in it.</p> …
- 34. … <h1>Our headline</h1> <p>This word will be <small>smaller</small> than the rest.</p> …
- 38. … <h1>Our headline</h1> <p>This word will be <a href=“https://google.com”>a link</a> to google.com.</p> …
- 39. <img> image tag
- 41. … <h1>Our headline</h1> <p>A time machine!</p> <img src=“delorean.gif”> …
- 42. BUILD TIME Create a new HTML document that includes: • Doctype • Head • Title • Body • H1 Headline • H3 Headline • Paragraphs • Bold text • Link to your favorite website • An image
- 44. <li> list item
- 48. … <div> Any HTML content you want to organize in a div container, including more divs. </div> …
- 50. … <div> Any <span>HTML</span> content you want to organize in a div container, including more divs. </div> …
- 51. NAMING THINGS
- 52. ids
- 53. … <div id=“intro”> Some text </div> … applied to a singular element
- 54. classes
- 55. … <div class=“product”> Product 1 </div> <div class=“product”> Product 2 </div> … applied to many elements
- 56. semantic web
- 57. self documenting
- 59. adding style!
- 60. inline css
- 61. … <div style=“color: red”> Any HTML content you want to organize in a div container, including more divs. </div> …
- 64. using .css files
- 65. … <head> <link rel="stylesheet" href=“css/mystyle.css” media="screen" charset="utf-8"> </head> …
- 66. html { font-family: arial; } body { margin: 0px; padding: 0px; } mystyle.css
- 67. selectors
- 68. element selectors h2 { … } li { … } p { … } div { … } body { … } table { … }
- 69. .product { … } li.product { … } li .product { … } class selectors
- 70. #intro { … } div#intro { … } div #intro { … } id selectors
- 71. #intro ul.products li { /* styles go here */ } mix and match selectors
- 72. css properties
- 74. height: 50px;
- 75. width: 100px;
- 76. margin: 5px 5px 5px 5px;
- 77. display: inline;
- 78. display: block;
- 79. display: none;
- 80. typography
- 82. font-size: 12px;
- 83. font-size: 12pt;
- 84. font-size: 1em;
- 85. font-size: 70%;
- 90. color!
- 91. color: black;
- 92. color: #000000;
- 93. color: #000;
- 96. div { height: 50px; width: 100px; color: white; font-size: 16px; background-color: black; } putting it all together
- 98. height width
- 100. padding: 5px 5px 5px 5px;
- 101. div { height: 50px; width: 100px; padding: 5px 10px 5px 10px; margin: 5px 10px 5px 10px; } putting it together
- 103. height of element padding-top padding-bottom margin-top margin-bottom border-top border-bottom+ actual height
- 105. div { margin: top right bottom left; } putting it together div { margin: 5px 10px 5px 10px; }
- 106. div { margin: 5px 10px; } shorthand div { margin: 5px; }
- 107. floats
- 108. div { float: left; } img { float: right }
- 109. CSS TIPS & TRICKS
- 110. STYLING A CSS BUTTON http://codepen.io/rcacademy/pen/JXMPRa
- 111. BACKGROUND IMAGES div { background-image: url(path/to/image.jpg); background-size: cover; background-repeat: no-repeat; }
- 113. UL LIst as a NAV http://codepen.io/rcacademy/pen/GZyMBJ
- 114. BUILD TIME CSS Layout Exercise https://github.com/rcacademy/webdevcamp/tree/master/week1/w1d3
- 115. CSS RESET • Resets allow you to set things to make your website look consistent across browsers • You can add more than one stylesheet to a page • Alternatively, you can do a normalize.css that sets all of your elements to a common baseline that is not 0.