day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/webday3-htmlcss.pdfclass id ids are unique!...
TRANSCRIPT
![Page 1: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/1.jpg)
HTML / CSS6.148
Victor Hung
![Page 2: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/2.jpg)
HTMLHypertext Markup Language
![Page 3: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/3.jpg)
<!DOCTYPE html> <html> <head> <title>Title!</title> </head> <body> <h1>Heading!</h1> <p>Paragraph!</p> </body> </html>
![Page 4: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/4.jpg)
<!DOCTYPE html> <html> <head> <title>Title!</title> </head> <body> <h1>Heading!</h1> <p>Paragraph!</p> </body> </html>
![Page 5: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/5.jpg)
<!DOCTYPE html> <html> <head> <title>Title!</title> </head> <body> <h1>Heading!</h1> <p>Paragraph!</p> </body> </html>
![Page 6: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/6.jpg)
<!DOCTYPE html> <html> <head> <title>Title!</title> </head> <body> <h1>Heading!</h1> <p>Paragraph!</p> </body> </html>
![Page 7: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/7.jpg)
<!DOCTYPE html> <html> <head> <title>Title!</title> </head> <body> <h1>Heading!</h1> <p>Paragraph!</p> </body> </html>
![Page 8: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/8.jpg)
<!DOCTYPE html> <html> <head> <title>Title!</title> </head> <body> <h1>Heading!</h1> <p>Paragraph!</p> </body> </html>
![Page 9: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/9.jpg)
<!DOCTYPE html> <html> <head> <title>Title!</title> </head> <body> <h1>Heading!</h1> <p>Paragraph!</p> </body> </html>
![Page 10: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/10.jpg)
<!DOCTYPE html> <html> <head> <title>Title!</title> </head> <body> <h1>Heading!</h1> <p>Paragraph!</p> </body> </html>
![Page 11: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/11.jpg)
![Page 12: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/12.jpg)
![Page 13: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/13.jpg)
![Page 14: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/14.jpg)
![Page 15: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/15.jpg)
![Page 16: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/16.jpg)
![Page 17: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/17.jpg)
![Page 18: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/18.jpg)
Basic HTML Elements<html> <body> <head> <h1>, <h2>, <h3> … <p> <img> <a> <div> <span>
Root of HTML Document Document Body Information about the doc Header Tags Paragraph Tags Image Hyperlink Section in a Document Section in a Document (text)
![Page 19: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/19.jpg)
Basic HTML Elements<ul> unordered list
![Page 20: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/20.jpg)
Basic HTML Elements<ul> <li>
unordered list list item
![Page 21: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/21.jpg)
Basic HTML Elements<ul> <li>item 1</li> <li>item 2</li> </ul>
unordered list list item
![Page 22: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/22.jpg)
Basic HTML Elements<ul> <li>item 1</li> <li>item 2</li> </ul>
unordered list list item
• item 1 • item 2
![Page 23: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/23.jpg)
HTML Attributes<a>Google</a>
![Page 24: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/24.jpg)
HTML Attributes<a href="http://google.com">Google</a>
![Page 25: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/25.jpg)
HTML Attributes<a href="http://google.com">Google</a>
![Page 26: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/26.jpg)
HTML Attributes<a href=“http://google.com”>Google</a>
<div>Some text</div>
![Page 27: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/27.jpg)
HTML Attributes
<div class=“warning”>Some text</div>
<a href=“http://google.com”>Google</a>
![Page 28: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/28.jpg)
HTML Attributes
<tag name=“value">content</tag>
<div class=“warning”>Some text</div>
<a href=“http://google.com”>Google</a>
![Page 29: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/29.jpg)
HTML Attributes
<tag name=“value">content</tag>
<div class=“warning”>Some text</div>
<a href=“http://google.com”>Google</a>
![Page 30: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/30.jpg)
HTML Void Elements<img src=“cutecat.jpg”> <input type=“text”>
![Page 31: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/31.jpg)
From IDEA to HTML…
![Page 32: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/32.jpg)
CSSCascading Style Sheets
![Page 33: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/33.jpg)
CSSA series of rules that dictate
the styling of your page
![Page 34: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/34.jpg)
p { color: red; font-size: 20pt; }
![Page 35: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/35.jpg)
p { color: red; font-size: 20pt; }
Selector
![Page 36: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/36.jpg)
p { color: red; font-size: 20pt; }
Selector Declaration
![Page 37: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/37.jpg)
p { color: red; font-size: 20pt; }
Property
![Page 38: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/38.jpg)
p { color: red; font-size: 20pt; }
Property Value
![Page 39: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/39.jpg)
p { color: red; font-size: 20pt; }
Property Value Semicolon
![Page 40: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/40.jpg)
p { color: red; font-size: 20pt; }
<p>This here is a lovely paragraph, full of good news and bad.</p>
<p>I write very short paragraphs</p>
![Page 41: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/41.jpg)
.intro { color: red; font-size: 20pt; }
<p class=“intro”>This here is a lovely paragraph, full of good news and bad.</p>
<p>I write very short paragraphs</p>
![Page 42: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/42.jpg)
#id { color: red; font-size: 20pt; }
<p id=“intro”>This here is a lovely paragraph, full of good news and bad.</p>
<p>I write very short paragraphs</p>
![Page 43: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/43.jpg)
CLASS
ID
IDs are Unique! Each ID should only be used once in the document An Element can only have one ID
#intro
.intro
Use the same class on multiple elements Use multiple classes on one element<div class=“alert good”>DONE</div>
![Page 44: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/44.jpg)
CSS Font & Text Properties
div { color: #FF0000; font-family: Times, Georgia, Serif; font-size: 50pt; font-weight: bold; /* normal */ text-align: center; text-decoration: underline; text-transform: capitalize; }
![Page 45: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/45.jpg)
what does this css look like?
![Page 46: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/46.jpg)
WHAT DOES THIS CSS LOOK LIKE?
![Page 47: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/47.jpg)
CSS Display Properties
div { background-color: red; }
hello <div>world</div>
![Page 48: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/48.jpg)
CSS Display Properties
div { background-color: red; display: block; }
hello <div>world</div>
![Page 49: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/49.jpg)
CSS Display Properties
hello <div>world</div>
div { background-color: red; display: inline; }
![Page 50: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/50.jpg)
CSS Display Properties
hello <div>world</div>
div { background-color: red; display: inline; width: 100px; height: 50px; }
![Page 51: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/51.jpg)
CSS Display Properties
hello <div>world</div>
div { background-color: red; display: inline-block; width: 100px; height: 50px; }
![Page 52: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/52.jpg)
CSS Display Properties
CONTENT
CONTENT
![Page 53: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/53.jpg)
CSS Display Properties
CONTENT CONTENT
![Page 54: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/54.jpg)
CSS Box Model
<div>best box</div>
div { border: 1px solid red; }
![Page 55: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/55.jpg)
CSS Box Model
<div>best box</div>
div { border-style: solid; border-color: red; border-width: 1px; }
![Page 56: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/56.jpg)
CSS Box Model
<div>best box</div>
div { border-style: solid; border-color: red; border-width: 1px 3px; }
![Page 57: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/57.jpg)
CSS Box Model
<div>best box</div>
div { border-style: solid; border-color: red; border-width: 1px 3px; }
TOP & BOTTOM, RIGHT & LEFT
![Page 58: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/58.jpg)
CSS Box Model
<div>best box</div>
div { border-style: solid; border-color: red; border-width: 1px 3px 1px 3px; }
TOP, RIGHT, BOTTOM, LEFT
![Page 59: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/59.jpg)
CSS Box Model
<div>best box</div>
div { border-bottom: 1px solid red; }
![Page 60: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/60.jpg)
CSS Box Model
<div>best box</div>
div { margin: 10px; border: 1px solid red; }
![Page 61: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/61.jpg)
CSS Box Model
<div>best box</div>
div { padding: 10px; border: 1px solid red; }
![Page 62: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/62.jpg)
CSS Box Model
![Page 63: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/63.jpg)
CSS Positioning<body> <div>here is some text</div> <div class=“content”>bloop!</div> </body>
body { position: relative; } .content { position: relative; }
![Page 64: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/64.jpg)
CSS Positioning<body> <div>here is some text</div> <div class=“content”>bloop!</div> </body>
body { position: relative; } .content { position: relative; top: 20px; }
![Page 65: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/65.jpg)
CSS Positioning<body> <div>here is some text</div> <div class=“content”>bloop!</div> </body>
body { position: relative; } .content { position: absolute; top: 10px; }
![Page 66: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/66.jpg)
CSS Positioning<body> <div>here is some text</div> <div class=“content”>bloop!</div> </body>
body { position: relative; } .content { position: fixed; top: 20px; }
![Page 67: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/67.jpg)
CSS Positioning
header
content
![Page 68: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/68.jpg)
CSS Positioning
header
RELATIVE, 10px
content
![Page 69: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/69.jpg)
CSS Positioning
header
ABSOLUTE (to parent), 10px
content
![Page 70: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/70.jpg)
CSS Positioning
header
FIXED (to window), 10px
content
![Page 71: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/71.jpg)
Let’s add some css…
![Page 72: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/72.jpg)
After Lunch!JavaScript & Nodejs
![Page 73: day3-htmlcss6.470.scripts.mit.edu/2015/pages/lectures/WEBday3-htmlcss.pdfCLASS ID IDs are Unique! Each ID should only be used once in the document An Element can only have one ID #intro.intro](https://reader034.vdocument.in/reader034/viewer/2022050217/5f62ed993615212d025bd24e/html5/thumbnails/73.jpg)
After Lunch!JavaScript & Nodejs
Try out some HTML/CSS http://bit.ly/6148htmlcss