HTML X CSS

1. HTML × CSS

2. Hi, I’m Cesar Chen @c_and_cat Freelance Front-end developer

3. HTML Hyper Text Markup Language

4. CSS Cascading Style Sheets

5. PROGRAMMING LANGUAGE?

6. PROGRAMMING LANGUAGE?

9. <!DOCTYPE html> <html> <head></head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <p>Paragraph</p> </body> </html> HTML

10. <!DOCTYPE html> <html> <head></head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <p>Paragraph</p> </body> </html> HTML

11. Just TAGS!

12. <p> Opening tag

13. </p> Closing tag

14. <p lang=“en-us”>English</p>

15. <p lang=“en-us”>English</p> ATTRIBUTE VALUE

16. <p lang=“zh”>中文</p>

17. Just TAGS! <tags>content</tags>

18. MORE

19. <!DOCTYPE html> <html> <head></head> <body> <h1>Heading 1</h1> <p>paragraph paragraph</p> <h2>Heading 2</h2> <p>paragraph paragraph</p> <h3>Heading 3</h3> <p>paragraph paragraph</p> </body> </html> HTML

20. <!DOCTYPE html> <html> <head></head> <body> <h1>Heading 1</h1> <p><i>paragraph paragraph</i></p> <h2>Heading 2</h2> <p><b>paragraph paragraph</b></p> <h3>Heading 3</h3> <p>paragraph<br />paragraph</p> </body> </html> HTML

21. <!DOCTYPE html> <html> <head></head> <body> <h1>Heading 1</h1> <p><i>paragraph paragraph</i></p> <h2>Heading 2</h2> <p><b>paragraph paragraph</b></p> <h3>Heading 3</h3> <p>paragraph<br />paragraph</p> </body> </html> HTML

23. <tags>content</tags>

24. <tags1> <tag2> content </tag2> </tags1>

25. <br />

26. <br /> <hr /> <input /> <img /> …

27. <hr />

28. <input type=“text” placeholder=“Type…” />

29. <input type=“text” placeholder=“Type…” />

30. <img src=“path/image.jpg” alt=“Image” />

31. <img src=“path/image.jpg” alt=“Image” />

32. <a href=“google.com”>Google</a>

33. <a href=“google.com”>Google</a> Google

34. INLINE vs BLOCK

37. CLASS & ID

38. <!DOCTYPE html> <html> <head></head> <body> <h1>Heading 1</h1> <p class=“paragraph” id=“a”>paragraph</p> <h2>Heading 2</h2> <p class=“paragraph” id=“b”>paragraph </p> <h3>Heading 3</h3> <p class=“paragraph” id=“c”>paragraph</p> </body> </html> HTML

39. CLASS vs ID

40. <div> DIVIDES CONTENT </div>

41. <!DOCTYPE html> <html> <head></head> <body> <div id=“header”> <h1>Heading 1</h1> <p class=“paragraph” id=“a”>paragraph</p> </div> <div id=“content”> <h2>Heading 2</h2> <p class=“paragraph” id=“b”>paragraph </p> <h3>Heading 3</h3> <p class=“paragraph” id=“c”>paragraph</p> </div> </body> </html> HTML

44. <div> BLOCK ELEMENT </div>

45. <span> INLINE ELEMENT </span>

46. Questions?

47. HTML × CSS

48. {CSS} STYLES <HTML>

49. Remember? CLASS & ID

50. <!DOCTYPE html> <html> <head></head> <body> <div id=“header”> <h1>Heading 1</h1> <p class=“paragraph” id=“a”>paragraph</p> </div> <div id=“content”> <h2>Heading 2</h2> <p class=“paragraph” id=“b”>paragraph </p> <h3>Heading 3</h3> <p class=“paragraph” id=“c”>paragraph</p> </div> </body> </html> HTML

51. CSS #a { font-family: cursive; color: green; font-size:36px; }

53. CSS #a { font-family: cursive; color: green; font-size:36px; } Prop. Selector Value

54. DEMO

55. {CSS} Makes <HTML> Looks Good

56. <!DOCTYPE html> <html> <head> <link href=“/path/style.css” type=“text/css” rel=“stlyesheet” /> <!- - or - !" <style> /* styles go here */ </style> </head> <body> </body> </html> HTML USING IT

57. RULES

58. <h1>YOLO</h1> <p id=“intro”> SWAG <i>SWAG</i> <b>SWAG</b> </p> <p>#YOLOSWAG #OBEY</p> HTML

59. * { font-family: Helvetica, Arial, sans; } h1 { font-family: “Cooper Black”; } i { color: green; } i { color: red; } b { color: pink; } p b { color: blue !important } p b { color: violet; } p#intro { font-size: 12px; } p { font-size: 10px; } CSS

61. FONT-SIZE UNITS

62. 1em 12px 12pt 100% based on size of “m” based on pixels based on standard based on 16px font

63. WIDTH & HEIGHT

64. <div> HAS WIDTH & HEIGHT </div>

65. #article { width: 100px; height: 100px; } CSS

66. #article { width: 100%; height: 100px; } CSS

67. MARGIN & PADDING

68. ELEMENT PADDING

69. ELEMENT PADDING padding: 10px 20px 30px 40px;

70. ELEMENT PADDING padding: 10px 20px 30px 40px; N E S W 10px 20px 30px 40px

71. ELEMENT PADDING MARGIN

72. ELEMENT PADDING MARGIN margin: 10px 5px 10px 20px;

74. Any Questions?

75. RESOURCES • W3Schools - http://www.w3schools.com/ • Codepen - http://codepen.io/

76. THANKS

HTML X CSS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML X CSS

Similar to HTML X CSS (20)

Recently uploaded

Recently uploaded (20)

HTML X CSS