Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML × CSS
Hi, I’m Cesar Chen
@c_and_cat
Freelance Front-end developer
HTML
Hyper Text Markup Language
CSS
Cascading Style Sheets
PROGRAMMING
LANGUAGE?
PROGRAMMING
LANGUAGE?
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h...
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h...
Just TAGS!
<p>
Opening tag
</p>
Closing tag
<p lang=“en-us”>English</p>
<p lang=“en-us”>English</p>
ATTRIBUTE
VALUE
<p lang=“zh”>中文</p>
Just TAGS!
<tags>content</tags>
MORE
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Heading 1</h1>
<p>paragraph paragraph</p>
<h2>Heading 2</h2>
<p>paragraph ...
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Heading 1</h1>
<p><i>paragraph paragraph</i></p>
<h2>Heading 2</h2>
<p><b>...
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Heading 1</h1>
<p><i>paragraph paragraph</i></p>
<h2>Heading 2</h2>
<p><b>...
<tags>content</tags>
<tags1>
<tag2>
content
</tag2>
</tags1>
<br />
<br />
<hr />
<input />
<img />
…
<hr />
<input type=“text”
placeholder=“Type…” />
<input type=“text”
placeholder=“Type…” />
<img src=“path/image.jpg”
alt=“Image” />
<img src=“path/image.jpg”
alt=“Image” />
<a href=“google.com”>Google</a>
<a href=“google.com”>Google</a>
Google
INLINE
vs
BLOCK
CLASS & ID
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Heading 1</h1>
<p class=“paragraph” id=“a”>paragraph</p>
<h2>Heading 2</h2...
CLASS vs ID
<div>
DIVIDES CONTENT
</div>
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id=“header”>
<h1>Heading 1</h1>
<p class=“paragraph” id=“a”>paragraph</p>...
<div>
BLOCK ELEMENT
</div>
<span>
INLINE ELEMENT
</span>
Questions?
HTML × CSS
{CSS}
STYLES
<HTML>
Remember?
CLASS & ID
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id=“header”>
<h1>Heading 1</h1>
<p class=“paragraph” id=“a”>paragraph</p>...
CSS
#a {
font-family: cursive;
color: green;
font-size:36px;
}
CSS
#a {
font-family: cursive;
color: green;
font-size:36px;
}
Prop.
Selector
Value
DEMO
{CSS} Makes <HTML>
Looks Good
<!DOCTYPE html>
<html>
<head>
<link href=“/path/style.css” type=“text/css”
rel=“stlyesheet” />
<!- - or - !"
<style>
/* st...
RULES
<h1>YOLO</h1>
<p id=“intro”>
SWAG
<i>SWAG</i>
<b>SWAG</b>
</p>
<p>#YOLOSWAG #OBEY</p>
HTML
* {
font-family: Helvetica, Arial, sans;
}
h1 {
font-family: “Cooper Black”;
}
i {
color: green;
}
i {
color: red;
}
b {
c...
FONT-SIZE UNITS
1em
12px
12pt
100%
based on size of “m”
based on pixels
based on standard
based on 16px font
WIDTH & HEIGHT
<div>
HAS WIDTH & HEIGHT
</div>
#article {
width: 100px;
height: 100px;
}
CSS
#article {
width: 100%;
height: 100px;
}
CSS
MARGIN & PADDING
ELEMENT
PADDING
ELEMENT
PADDING
padding: 10px 20px 30px 40px;
ELEMENT
PADDING
padding: 10px 20px 30px 40px;
N E S W
10px
20px
30px
40px
ELEMENT
PADDING
MARGIN
ELEMENT
PADDING
MARGIN
margin: 10px 5px 10px 20px;
Any Questions?
RESOURCES
• W3Schools - http://www.w3schools.com/
• Codepen - http://codepen.io/
THANKS
HTML X CSS
HTML X CSS
HTML X CSS
HTML X CSS
HTML X CSS
HTML X CSS
HTML X CSS
HTML X CSS
HTML X CSS
HTML X CSS
Upcoming SlideShare
Loading in …5
×

HTML X CSS

481 views

Published on

Intro HTML & CSS

Published in: Internet
  • Be the first to comment

HTML X CSS

  1. 1. HTML × CSS
  2. 2. Hi, I’m Cesar Chen @c_and_cat Freelance Front-end developer
  3. 3. HTML Hyper Text Markup Language
  4. 4. CSS Cascading Style Sheets
  5. 5. PROGRAMMING LANGUAGE?
  6. 6. PROGRAMMING LANGUAGE?
  7. 7. <!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
  8. 8. <!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
  9. 9. Just TAGS!
  10. 10. <p> Opening tag
  11. 11. </p> Closing tag
  12. 12. <p lang=“en-us”>English</p>
  13. 13. <p lang=“en-us”>English</p> ATTRIBUTE VALUE
  14. 14. <p lang=“zh”>中文</p>
  15. 15. Just TAGS! <tags>content</tags>
  16. 16. MORE
  17. 17. <!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
  18. 18. <!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
  19. 19. <!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
  20. 20. <tags>content</tags>
  21. 21. <tags1> <tag2> content </tag2> </tags1>
  22. 22. <br />
  23. 23. <br /> <hr /> <input /> <img /> …
  24. 24. <hr />
  25. 25. <input type=“text” placeholder=“Type…” />
  26. 26. <input type=“text” placeholder=“Type…” />
  27. 27. <img src=“path/image.jpg” alt=“Image” />
  28. 28. <img src=“path/image.jpg” alt=“Image” />
  29. 29. <a href=“google.com”>Google</a>
  30. 30. <a href=“google.com”>Google</a> Google
  31. 31. INLINE vs BLOCK
  32. 32. CLASS & ID
  33. 33. <!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
  34. 34. CLASS vs ID
  35. 35. <div> DIVIDES CONTENT </div>
  36. 36. <!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
  37. 37. <div> BLOCK ELEMENT </div>
  38. 38. <span> INLINE ELEMENT </span>
  39. 39. Questions?
  40. 40. HTML × CSS
  41. 41. {CSS} STYLES <HTML>
  42. 42. Remember? CLASS & ID
  43. 43. <!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. 44. CSS #a { font-family: cursive; color: green; font-size:36px; }
  45. 45. CSS #a { font-family: cursive; color: green; font-size:36px; } Prop. Selector Value
  46. 46. DEMO
  47. 47. {CSS} Makes <HTML> Looks Good
  48. 48. <!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
  49. 49. RULES
  50. 50. <h1>YOLO</h1> <p id=“intro”> SWAG <i>SWAG</i> <b>SWAG</b> </p> <p>#YOLOSWAG #OBEY</p> HTML
  51. 51. * { 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
  52. 52. FONT-SIZE UNITS
  53. 53. 1em 12px 12pt 100% based on size of “m” based on pixels based on standard based on 16px font
  54. 54. WIDTH & HEIGHT
  55. 55. <div> HAS WIDTH & HEIGHT </div>
  56. 56. #article { width: 100px; height: 100px; } CSS
  57. 57. #article { width: 100%; height: 100px; } CSS
  58. 58. MARGIN & PADDING
  59. 59. ELEMENT PADDING
  60. 60. ELEMENT PADDING padding: 10px 20px 30px 40px;
  61. 61. ELEMENT PADDING padding: 10px 20px 30px 40px; N E S W 10px 20px 30px 40px
  62. 62. ELEMENT PADDING MARGIN
  63. 63. ELEMENT PADDING MARGIN margin: 10px 5px 10px 20px;
  64. 64. Any Questions?
  65. 65. RESOURCES • W3Schools - http://www.w3schools.com/ • Codepen - http://codepen.io/
  66. 66. THANKS

×