Embed Size (px)
Citation preview
HTML × CSS
Hi, I’m Cesar Chen@c_and_cat
Freelance Front-end developer
HTMLHyper Text Markup Language
CSSCascading 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> <h5>Heading 5</h5> <h6>Heading 6</h6> <p>Paragraph</p>
</body> </html>
HTML
<!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
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 paragraph</p> <h3>Heading 3</h3> <p>paragraph paragraph</p>
</body> </html>
HTML
<!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
<!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
<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>
INLINEvsBLOCK
CLASS & ID
<!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
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>
<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
<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>
</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
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> /* styles go here */
</style> </head> <body> </body>
</html>
HTML
USING IT
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 { color: pink; } p b { color: blue !important } p b { color: violet; }
p#intro { font-size: 12px; } p { font-size: 10px; }
CSS
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
20px30px
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
