HTML & CSS

HTML&CSS

Hi, I’m Jerry Hu

HTML: Hyper Text Markup Language

HTML: IS NOT A PROGRAMMING LANGUAGE

http://www.y ಠ

CSS: Cascading Style Sheet

CSS: IS NOT A PROGRAMMING LANGUAGE

STRUCTURE

This is the main heading ! subdetails subdetails subdetails subdetails
subdetails subdetails subdetails subdetails ! 2nd heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails ! 3rd heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails

<html> <header> <title>title of the page</title> </header> <body> <h1>This is
the main heading</h1> <p>subdetails</p> ! <h2>2nd heading</h2> <p>subdetails</p> ! <h3>3rd heading</h3> <p>subdetails</p> </body> </html> HTML

<html> <header> <title>title</title> </header> <body> <h1>main heading</h1> <p>subdetails</p> ! <h2>2nd
heading<h2> <p>subdetails</p> ! <h3>3rd heading</h3> <p>subdetails</p> </body> </html> This is the main heading ! subdetails subdetails subdetails subdetails ! 2nd heading ! subdetails subdetails subdetails subdetails ! 3rd heading ! subdetails subdetails subdetails subdetails HTML

#hashtag

<p>subdetails</p>

ATTRIBUTES

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

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

<p lang=“fr”>Français</p>

<tags>content</tags>

MORE TAGS

subdetails subdetails subdetails subdetails ! 2nd heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails ! 3rd heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails

<html> <header> <title>2nd example</title> </header> <body> <h1>This is the main
heading</h1> <p><i>subdetails</i></p> ! <h2>2nd heading<h1> <p><b>subdetails</b></p> ! <h3>3rd heading</h3> <p>subdetails<br />subdetails</p> </body> </html> HTML

<nested> <tag> words </tag> </nested>

WHATS <br />

<tags>content</tags>

YouTube

<a href=“youtube.com”>YouTube</a>

<a href=“youtube.com”>YouTube</a> DISPLAY LOCATION

Images: <img src=“r.jpg” /> ! Links: <a href=“link”>text</a>

INLINE vs BLOCK

subdetails subdetails subdetails subdetails ! 2nd heading ! ! ! ! ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails ! 3rd heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails

<html> <header> <title>tangent 1</title> </header> <body> <h1>This is the main
heading</h1> <p><i>subdetails</i></p> ! <h2>2nd heading<h1> <p><b>sub<img src=“r.jpg” />details</b></p> ! <h3>3rd heading</h3> <p>subdetails<br />subdetails</p> </body> </html> HTML

COMMENTS

<html> <header> <title>tangent 2</title> </header> <body> <!—-comment about code—-> <h1>This
is the main heading</h1> <p><i>subdetails</i></p> ! <h2>2nd heading<h1> <p><b>subdetails</b></p> ! <h3>3rd heading</h3> <p>subdetails<br />subdetails</p> </body> </html> HTML

CLASS & ID

<html> <header> <title>3rd example</title> </header> <body> <h1>This is the main
heading</h1> <p class=“subdetails” id=“t”>subdetails</p> ! <h2>2nd heading<h1> <p class=“subdetails” id=“m”>subdetails</p> ! <h3>3rd heading</h3> <p class=“subdetails” id=“b”>subdetails</p> </body> </html> HTML

CLASS VS ID

<div> DIVIDES CONTENT </div>

<html> <header> <title>4th example</title> </header> <body> <div id=“header”> <h1>My Webpage</h1>
<!—-<img src=“r.jpg” title=“me”/>—-> <p id=“slogan”>Welcome to my webpage</p> </div> ! <div id=“content”> <h2 class=“title”>2nd heading<h1> <p class=“post”>subdetails</p> ! <h3 class=“title”>3rd heading</h3> <p class=“post”>subdetails</p> </div> </body> </html> HTML

This is the main heading ! welcome to my webpage
! 2nd heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails ! 3rd heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails

<div> IS A BLOCK ELEMENT </div>

MEET <span>

<span> IS AN INLINE ELEMENT </span>

GROUPERS: <div>is a block</div> </span>is inline</span>

Questions?

HTML&CSS ^This thing^

“ html’s bae ”

STRUCTURE

{CSS} STYLES <HTML>

REMEMBER: CLASS AND ID

#slogan { font-family: cursive; color: green; font-size: 12px; } CSS

#slogan { font-family: cursive; color: green; font-size: 12px; } SELECTOR
PROP. VALUE DECLARATION CSS

#NOONECARES

#slogan { font-family: cursive; color: green; font-size: 12px; } CSS

body { background-color: rgba(86,98,111,1); } #header { font-size: 20px; }
#slogan { font-family: cursive; color: green; font-size: 12px; } #content { font-family: sans; } .title { font-size: 15px; } .post { font-size: 12px; font-family: serif; } CSS

#header, .post { font-family: serif; } CSS

{CSS} MAKES <HTML> LOOK GOOD

USING IT

<html> ! <head> ! <title>Title</title> ! <link href=“styles.css” type=“text/css” rel=“stylesheet”
/> ! </head> ! <body> <!—-Content—-> </body> ! </html> HTML

<html> ! <head> ! <title>Title</title> ! <style> /*styles go here*/
</style> ! </head> ! <body> <!—-Content—-> </body> ! </html> HTML

<html> ! <head> ! <title>Title</title> ! <style> /*styles go here*/
</style> ! </head> ! <body> <!—-Content—-> </body> ! </html> <btw this is a css comment HTML

<h1>YOLO</h1> ! <p id=“introduction”> 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; } CSS

p#intro { font-size: 12px; } p { font-size: 10px; YOLO
! SWAG SWAG SWAG ! #YOLOSWAG #OBEY YIELDS: CSS

* { font-family: Helvetica, Arial, sans; } CSS

LAST FIRST SPECIFICITY !IMPORTANT

INHERITANCE

body { font-family: Helvetica, Arial, sans; color: #efefef; padding: 20px
10px 5px 10px; background-color: gray; } #page { border: 1px solid #efefef; background-color: #111; padding: inherit; } CSS HTML <div id=“page”> <h1>Aplannr</h1> <p>Aplannr is a drag and drop planner app</p> <p>It won best in state in a competition<p> </div>

<h1> INHERITS FONT FROM <body>

! ! ! Aplannr! ! ! Aplannr is a drag
and drop planner app! ! ! It won best in state in a competition

FONTS&COLOR

serif sans mono light medium bold normal italic condensed regular

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

Questions?

HEIGHT & WIDTH

<div> HAS WIDTH & HEIGHT </div>

#article { border: 1px solid #efefef; background-color: #111; height: 100px;
width: 100px; } CSS

width: 100%; } CSS

width: 75%; } CSS

<div> CAN HAVE WIDTH & HEIGHT LIMITS </div>

width: 75%; min-width: 200px; max-width: 500px; } CSS

OVERFLOW

width: 75%; min-width: 200px; max-width: 500px; overflow: hidden; } CSS

width: 75%; min-width: 200px; max-width: 500px; overflow: scroll; } CSS

<div> HEIGHT & WIDTH

SPACING&POSITIONING

! ! ! Aplannr! ! ! Aplannr is a drag
and drop planner app! ! ! It won best in state in a competition

body { font-family: Helvetica, Arial, sans; color: #efefef; padding: 20px
10px 5px 10px; background-color: gray; } #page { border: 1px solid #efefef; background-color: #111; padding: inherit; } CSS HTML <div id=“page”> <h1>Aplannr</h1> <p>Aplannr is a drag and drop planner app</p> <p>It won best in state in a competition<p> </div>

PADDING IS IN RED

MARGIN IS IN BLUE

Lorem ipsum: ! Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui oﬃcia deserunt mollit anim id est laborum Lorem ipsum: ! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui oﬃcia deserunt mollit anim id est laborum

#article { height: 300px; width: 500px; margin: 10px auto 10px
auto; padding: 8px 2px 8px 2px; } CSS

#article { height: 300px; width: 500px; margin: 10px auto 10px
auto; padding: 8px 2px 8px 2px; } CSS N E S W

#article { height: 300px; width: 500px; margin: 10px; padding: 2px;
} CSS

#article { height: 300px; width: 500px; margin: auto; top: 0;
left: 0; padding: 2px; } CSS

#article { height: 300px; width: 500px; position: absolute; margin: auto;
top: 0; bottom: 0; padding: 2px; } CSS

MARGIN: OUTSIDE PADDING: INSIDE

THAT’S ALL FOLKS

HTML&CSS

HTML & CSS

HTML & CSS

Other Decks in Programming

Featured

Transcript