html news packages lesson
DESCRIPTION
TRANSCRIPT
![Page 1: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/1.jpg)
HTML CSSOnline News Packages
![Page 2: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/2.jpg)
Review
![Page 3: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/3.jpg)
HTMLCSS
JavaScript
![Page 4: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/4.jpg)
HTMLCSS
JavaScript
Content (tags)
![Page 5: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/5.jpg)
HTMLCSS
JavaScript
Content (tags)
Form (styles)
![Page 6: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/6.jpg)
HTMLCSS
JavaScript
Content (tags)
Form (styles)
Function (code)
![Page 7: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/7.jpg)
HTML Review
<h1an HTML tag
</h1>>
![Page 8: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/8.jpg)
HTML Review
<h1an HTML tag
>id="title"an attribute
![Page 9: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/9.jpg)
Three attributes we will be using a lot:
id="some_identifier"
class="some_grouping"
style="size:14px; margin:0;"
![Page 10: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/10.jpg)
Three attributes we will be using a lot:
id="some_identifier"
class="some_grouping"
style="size:14px; margin:0;"
![Page 11: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/11.jpg)
Three attributes we will be using a lot:
id="some_identifier"
class="some_grouping"
style="size:14px; margin:0;"
![Page 12: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/12.jpg)
Three attributes we will be using a lot:
id="some_identifier"
class="some_grouping"
style="size:14px; margin:0;"
![Page 13: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/13.jpg)
ID Attribute
<h1 id="title">This is a title</h1> <h2 id="subhead">This is a subhead</h2> <p id="part1">This is a paragraph describing something important. I've given it an identifier.</p> <p id="part2">This is another paragraph.</p>
![Page 14: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/14.jpg)
ID Attribute
<h1 id="title">This is a title</h1> <h2 id="subhead">This is a subhead</h2> <p id="part1">This is a paragraph describing something important. I've given it an identifier.</p> <p id="part2">This is another paragraph.</p>
<style> #title{ font-‐size: 20px; } #subhead{ font-‐size: 30px; } #part1{ font-‐size: 22px; }
</style>
![Page 15: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/15.jpg)
ID Attribute
<h1 id="title">This is a title</h1> <h2 id="subhead">This is a subhead</h2> <p id="part1">This is a paragraph describing something important. I've given it an identifier.</p> <p id="part2">This is another paragraph.</p>
<style> #title{ font-‐size: 20px; } #subhead{ font-‐size: 30px; } #part1{ font-‐size: 22px; }
</style>
![Page 16: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/16.jpg)
ID Selector for CSS
#someid{ !
font-‐size: 40px; !
}
![Page 17: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/17.jpg)
ID Selector for CSS
#someid{ !
font-‐size: 40px; !
}
![Page 18: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/18.jpg)
ID Selector for CSS
#someid{ !
font-‐size: 40px; !
}
![Page 19: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/19.jpg)
ID Selector for CSS
#someid{ !
font-‐size: 40px; !
}
![Page 20: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/20.jpg)
ID Selector for CSS
#someid{ !
font-‐size: 40px; !
}
![Page 21: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/21.jpg)
ID Selector for CSS
#someid{ !
font-‐size: 40px; !
}
![Page 22: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/22.jpg)
ID Selector for CSS
#someid{ !
font-‐size: 40px; !
}
![Page 23: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/23.jpg)
CSS goes in the <style> tag<script> !
#some_id1{ font-‐size:22px;
} !
#some_id2{ font-‐size:35px;
} !
</script>
![Page 24: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/24.jpg)
CSS goes in the <style> tag<script> !
#some_id1{ font-‐size:22px;
} !
#some_id2{ font-‐size:35px;
} !
</script>
![Page 25: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/25.jpg)
Exercise
![Page 26: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/26.jpg)
Step 1
In your text-editing app, create three headlines as <h2> tags. They should be: !
"My favorite movie" "My favorite restaurant" and "My favorite hobby"
![Page 27: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/27.jpg)
Step 2
Give each h2 header a unique ID attribute.
![Page 28: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/28.jpg)
Answer so far
<h2 id="movie">My favorite movie</h2><h2 id="food">My favorite restaurant</h2><h2 id="hobby">My favorite hobby</h2>
![Page 29: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/29.jpg)
Step 3
Create a pair of <style> tags (opening and closing) above everything else you just typed.
![Page 30: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/30.jpg)
Answer so far
<style> !
</style>
![Page 31: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/31.jpg)
Step 4
Using the pound-sign selector, type CSS code to adjust the font-‐size for each headline so that they are all different sizes.
![Page 32: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/32.jpg)
Answer<style>
#movie{ font-‐size: 30px;
} #food{
font-‐size: 22px; }
</style> <h2 id="movie">My favorite movie</h2><h2 id="food">My favorite restaurant</h2><h2 id="hobby">My favorite hobby</h2>
![Page 33: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/33.jpg)
Class attribute in HTML
<h1 </h1>>
![Page 34: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/34.jpg)
Class attribute in HTML
<h1 >class="name"
![Page 35: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/35.jpg)
Class Selector for CSS
.name{ !
font-‐size: 40px; !
}
![Page 36: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/36.jpg)
Class Selector for CSS
.name{ !
font-‐size: 40px; !
}
![Page 37: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/37.jpg)
Class Selector for CSS
.name{ !
font-‐size: 40px; !
}
![Page 38: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/38.jpg)
Class Selector for CSS
.name{ !
font-‐size: 40px; !
}
![Page 39: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/39.jpg)
Class Selector for CSS
.name{ !
font-‐size: 40px; !
}
![Page 40: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/40.jpg)
Class Selector for CSS
.name{ !
font-‐size: 40px; !
}
![Page 41: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/41.jpg)
Class Selector for CSS
.name{ !
font-‐size: 40px; !
}
![Page 42: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/42.jpg)
Exercise
![Page 43: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/43.jpg)
Step 1
Give two of your <h2> tags the same class attribute. !
Hint: Tags can have both an id and a class attribute!
![Page 44: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/44.jpg)
Answer so far
<h2 id="movie" class="fun">My favorite movie</h2><h2 id="food" class="fun">My favorite restaurant</h2><h2 id="hobby">My favorite hobby</h2>
![Page 45: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/45.jpg)
Step 2
Add a single CSS class to your style tag and set the color property to red.!
Hint: look at how you did the ID, and use the same format.
![Page 46: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/46.jpg)
Answer<style> !
.fun{ !
color: red; !
} !
!
</style>
![Page 47: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/47.jpg)
Let's add some more properties
Try adding a few more properties to either individual tags, or to the class.!border: 1px solid black; background: green; background: url('http://placekitten.com/200/');
![Page 48: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/48.jpg)
Inline CSS
<h2 style="color:red;"> </h2>
style attribute
![Page 49: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/49.jpg)
Exercise
Write some CSS directly in the h2 tag.!
Create a style attribute where the style sets the color property to blue.!
Take note, if it contradicts your CSS in your <style> tag, this takes precedence.
![Page 50: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/50.jpg)
Answer so far
<h2 id="movie" class="fun">My favorite movie</h2><h2 id="food" class="fun">My favorite restaurant</h2><h2 id="hobby" style="color:blue;">My favorite hobby</h2>
![Page 51: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/51.jpg)
Answer so far
<h2 id="movie" class="fun">My favorite movie</h2><h2 id="food" class="fun">My favorite restaurant</h2><h2 id="hobby" style="color:blue;">My favorite hobby</h2>
![Page 52: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/52.jpg)
Pop Quiz
![Page 53: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/53.jpg)
What's the pound symbol for?
![Page 54: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/54.jpg)
What's the pound symbol for?
Signifies an ID sector
![Page 55: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/55.jpg)
What CSS selector uses the period?
![Page 56: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/56.jpg)
What CSS selector uses the period?
A class selector
![Page 57: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/57.jpg)
Which selector would I use if I wanted to style multiple items in my news
package at once?
![Page 58: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/58.jpg)
Which selector would I use if I wanted to style multiple items in my news
package at once?
A class selector
![Page 59: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/59.jpg)
Explain the difference between a class selector and ID selector
![Page 60: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/60.jpg)
Explain the difference between a class selector and ID selector
IDs are used to reference one unique tag. !
Classes are used to reference multiple tags at once.
![Page 61: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/61.jpg)
RecapThree Attributes:
![Page 62: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/62.jpg)
RecapThree Attributes:
ID attribute: Give each tag a unique identifier, so we can reference it in CSS.
![Page 63: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/63.jpg)
RecapThree Attributes:
ID attribute: Give each tag a unique identifier, so we can reference it in CSS.
CLASS attribute: Give groups of tags a class name, so we can reference it in CSS.
![Page 64: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/64.jpg)
RecapThree Attributes:
ID attribute: Give each tag a unique identifier, so we can reference it in CSS.
CLASS attribute: Give groups of tags a class name, so we can reference it in CSS.
STYLE attribute: Screw all that. Just put the CSS right in the tag.
![Page 65: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/65.jpg)
Understanding <div> tags
![Page 66: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/66.jpg)
HTML:
CSS:
<div id="container"> !!</div>
![Page 67: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/67.jpg)
Some rules about divs
• By default, <div> tags are invisible.
![Page 68: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/68.jpg)
Some rules about divs
• By default, <div> tags are invisible.
• By default, <div> tags have height of zero.
![Page 69: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/69.jpg)
Some rules about divs
• By default, <div> tags are invisible.
• By default, <div> tags have height of zero.
• By default, <div> tags stretch to the full width of the browser.
![Page 70: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/70.jpg)
HTML:
CSS:#container{ !
border: 1px solid black; !}
<div id="container"> !!</div>
![Page 71: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/71.jpg)
HTML:
CSS:#container{ !
border: 1px solid black; height: 300px;
!}
<div id="container"> !!</div>
![Page 72: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/72.jpg)
HTML:
CSS:#container{ !
border: 1px solid black; height: 300px; width: 200px;
!}
<div id="container"> !!</div>
![Page 73: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/73.jpg)
HTML:
CSS:#container{ !
border: 1px solid black; height: 300px; width: 400px; background: red;
}
<div id="container"> !!</div>
![Page 74: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/74.jpg)
Pop Quiz!
![Page 75: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/75.jpg)
If I don't set a width, how wide are divs by default?
![Page 76: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/76.jpg)
100% or the full browser width!
If I don't set a width, how wide are divs by default?
![Page 77: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/77.jpg)
How tall are empty divs if I don't set a height?
![Page 78: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/78.jpg)
Zero pixels.!
How tall are empty divs if I don't set a height?
![Page 79: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/79.jpg)
If I create a div, and I don't see it on my screen, what do I need to do to see it?
![Page 80: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/80.jpg)
Add some CSS styling, like border, height, width, background colors/images, etc.!
If I create a div, and I don't see it on my screen, what do I need to do to see it?
![Page 81: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/81.jpg)
• <div> tags conform to the height of their content.!
• If you set a height on a <div> tag, it overrides the content inside of it.!
• If you set a width on a <div> tag, it overrides the content inside of it.
![Page 82: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/82.jpg)
HTML:
CSS:#container{ !
border: 1px solid black; !}
<div id="container"> !!!</div>
![Page 83: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/83.jpg)
HTML:
CSS:#container{ !
border: 1px solid black; !}
<div id="container"> !Hello world! !</div>
Hello world!
![Page 84: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/84.jpg)
HTML:
CSS:#container{ !
border: 1px solid black; !}
<div id="container"> !Hello world!<br> Foo<br> Bar<br> !</div>
Hello world! Foo Bar
![Page 85: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/85.jpg)
HTML:
CSS:#container{ !
border: 1px solid black; height: 12px;
!}
<div id="container"> !Hello world!<br> Foo<br> Bar<br> !</div>
Hello world! Foo Bar
![Page 86: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/86.jpg)
HTML:
CSS:#container{ !
border: 1px solid black; height: 25px; width: 20px;
!}
<div id="container"> !Hello world! !</div>
Hello world!
![Page 87: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/87.jpg)
CSS!IS!AWESOME
![Page 88: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/88.jpg)
Pop Quiz!
![Page 89: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/89.jpg)
What happens to a <div> tag's height when I add some text to it?
![Page 90: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/90.jpg)
It expands to conform to the content.!
What happens to a <div> tag's height when I add some text to it?
![Page 91: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/91.jpg)
What happens if the width of a <div> is smaller than a single word?
![Page 92: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/92.jpg)
The text will protrude from the box.!
What happens if the width of a <div> is smaller than a single word?
![Page 93: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/93.jpg)
HTML:
CSS:#container{ !
border: 1px solid black; height: 15px; width: 50px; !
}
<div id="container"> !Hello world! !</div>
Hello world!
![Page 94: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/94.jpg)
HTML:
CSS:#container{ !
border: 1px solid black; height: 15px; width: 50px; overflow: hidden;
}
<div id="container"> !Hello world! !</div>
Hello world!
![Page 95: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/95.jpg)
HTML:
CSS:#container{ !
border: 1px solid black; height: 15px; width: 50px; overflow: hidden;
}
<div id="container"> !Hello world! !</div>
Hello world!
![Page 96: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/96.jpg)
The Box Model
![Page 97: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/97.jpg)
The box model
he l loMargin Border Padding
Width
![Page 98: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/98.jpg)
Box Model
Any padding, borders or margin are in addition to the width of the box.
![Page 99: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/99.jpg)
HTML:
CSS:#container{ width: 960px; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
![Page 100: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/100.jpg)
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
![Page 101: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/101.jpg)
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
![Page 102: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/102.jpg)
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
![Page 103: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/103.jpg)
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; padding: 5px; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
![Page 104: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/104.jpg)
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; padding: 5px; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
960px
![Page 105: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/105.jpg)
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; padding: 5px; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
960px
![Page 106: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/106.jpg)
Margins, Padding, Width
he l loMargin Border Padding
Width
![Page 107: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/107.jpg)
Box model
![Page 108: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/108.jpg)
Box model
![Page 109: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/109.jpg)
Box model
![Page 110: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/110.jpg)
Box model
![Page 111: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/111.jpg)
Pop Quiz
![Page 112: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/112.jpg)
What is the width of this box?
he l lo20px 2px 10px
200px
![Page 113: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/113.jpg)
200 pixels
What is the width of this box?
he l lo20px 2px 10px
200px
![Page 114: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/114.jpg)
What is the width and padding combined?
he l lo20px 2px 10px
200px
![Page 115: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/115.jpg)
220 pixels
What is the width and padding combined?
he l lo20px 2px 10px
200px
![Page 116: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/116.jpg)
What is the width and padding and border combined?
he l lo20px 2px 10px
200px
![Page 117: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/117.jpg)
224 pixels
What is the width and padding and border combined?
he l lo20px 2px 10px
200px
![Page 118: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/118.jpg)
What is the total (outer) width?
he l lo20px 2px 10px
200px
![Page 119: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/119.jpg)
200 + 20 + 20 + !10 + 10 + 2 + 2 =!
!
264 pixels
What is the total (outer) width?
he l lo20px 2px 10px
200px
![Page 120: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/120.jpg)
padding and margins
padding:
![Page 121: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/121.jpg)
padding and margins
padding:10px;
![Page 122: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/122.jpg)
padding and marginspadding:10px 5px 1px 0;
![Page 123: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/123.jpg)
padding and marginspadding:10px 5px 1px 0;
top
![Page 124: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/124.jpg)
padding and marginspadding:10px 5px 1px 0;
top right
![Page 125: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/125.jpg)
padding and marginspadding:10px 5px 1px 0;
top right
bottom
![Page 126: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/126.jpg)
padding and marginspadding:10px 5px 1px 0;
top right
bottom
left
![Page 127: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/127.jpg)
padding and marginspadding:10px 5px 1px 0;
top right
bottom
left
![Page 128: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/128.jpg)
padding and margins
margin: 5px 15px 1px 10px;
![Page 129: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/129.jpg)
padding and margins
margin: 5px 15px 1px 10px;
top
![Page 130: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/130.jpg)
padding and margins
margin: 5px 15px 1px 10px;
top right
![Page 131: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/131.jpg)
padding and margins
margin: 5px 15px 1px 10px;
top right bottom
![Page 132: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/132.jpg)
padding and margins
margin: 5px 15px 1px 10px;
top right bottom left
![Page 133: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/133.jpg)
padding and margins
padding:10px 2px;
![Page 134: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/134.jpg)
padding and margins
padding:10px 2px;
top!bottom
![Page 135: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/135.jpg)
padding and margins
padding:10px 2px;
top!bottom
right!left
![Page 136: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/136.jpg)
Pop Quiz
![Page 137: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/137.jpg)
Explain the size of the margins around the box
margin: 5px 25px;
![Page 138: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/138.jpg)
Top and bottom are 5 pixels, !left and right are 25 pixels.!
Explain the size of the margins around the box
margin: 5px 25px;
![Page 139: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/139.jpg)
Explain the size of the padding inside this box
padding: 1px 1px 1px 40px;
![Page 140: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/140.jpg)
Top, right, bottom are 1 pixel,!the left side is 40 pixels
Explain the size of the padding inside this box
padding: 1px 1px 1px 40px;
![Page 141: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/141.jpg)
Explain the size of the margins around the box
margin: 0 5px;
![Page 142: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/142.jpg)
Top, right are 0 pixels,!the left and right side is 5 pixels
Explain the size of the margins around the box
margin: 0 5px;
![Page 143: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/143.jpg)
Explain the size of the padding inside the box
padding: 15px;
![Page 144: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/144.jpg)
All sides are 15 pixels
Explain the size of the padding inside the box
padding: 15px;
![Page 145: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/145.jpg)
bootstrap |ˈbo͞otˌstrap|
!noun !1 a loop at the back of a boot, used to pull it on. !2 Computing [ usu. as modifier ] the technique of starting with existing resources to create something more complex and effective: we see the creative act as a bootstrap process. !!verb (bootstraps, bootstrapping, bootstrapped) [ with obj. ] !1 get (oneself or something) into or out of a situation using existing resources: the company is bootstrapping itself out of a marred financial past. !• start up (an enterprise), esp. one based on the Internet, with minimal resources: they are bootstrapping their stations themselves, not with lots of dot-com venture capital.
![Page 146: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/146.jpg)
Bootstrap
![Page 147: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/147.jpg)
Bootstrap CDN
http://bit.ly/google-bootstrap
Include these <script> and <link> tags in the head of your document. !
You should also include jQuery too.
![Page 148: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/148.jpg)
start with a responsive image
<img src="http://placehold.it/2000x1000" class="img-‐responsive" />
![Page 149: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/149.jpg)
start with a responsive image
<img src="http://placehold.it/2000x1000" class="img-‐responsive" />
![Page 150: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/150.jpg)
add a container
<div class="container"> !
!
!
!
!
</div>
![Page 151: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/151.jpg)
add a container
<div class="container"> !
!
!
!
!
</div>
![Page 152: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/152.jpg)
Grid System
![Page 153: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/153.jpg)
![Page 154: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/154.jpg)
![Page 155: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/155.jpg)
![Page 156: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/156.jpg)
![Page 157: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/157.jpg)
![Page 158: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/158.jpg)
![Page 159: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/159.jpg)
![Page 160: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/160.jpg)
![Page 161: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/161.jpg)
4 col 4 col
4 col
8 col
![Page 162: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/162.jpg)
row
![Page 163: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/163.jpg)
row col 3
![Page 164: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/164.jpg)
row col 3 col 3
![Page 165: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/165.jpg)
row col 3 col 3 col 3
![Page 166: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/166.jpg)
row col 3 col 3 col 3 col 3
![Page 167: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/167.jpg)
row col 3 col 3 col 3 col 3 =12
![Page 168: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/168.jpg)
row col 3 col 3 col 3 col 3
row
=12
![Page 169: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/169.jpg)
row col 3 col 3 col 3 col 3
row col 5
=12
![Page 170: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/170.jpg)
row col 3 col 3 col 3 col 3
row col 5 col 2
=12
![Page 171: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/171.jpg)
row col 3 col 3 col 3 col 3
row col 5 col 2 col 4
=12
![Page 172: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/172.jpg)
row col 3 col 3 col 3 col 3
row col 5 col 2 col 4 col 1
=12
![Page 173: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/173.jpg)
row col 3 col 3 col 3 col 3
row col 5 col 2 col 4 col 1
=12
=12
![Page 174: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/174.jpg)
Nested grids
Row
![Page 175: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/175.jpg)
Nested grids
col 8Row
![Page 176: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/176.jpg)
Nested grids
col 8Row col 4
![Page 177: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/177.jpg)
Nested grids
col 8
Row
Row col 4
![Page 178: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/178.jpg)
Nested grids
col 8
Row
Row col 4
![Page 179: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/179.jpg)
Nested grids
col 8
Row
Row col 4
![Page 180: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/180.jpg)
Nested grids
col 8
Rowcol 4
Row col 4
![Page 181: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/181.jpg)
Nested grids
col 8
Rowcol 4 col 4
Row col 4
![Page 182: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/182.jpg)
Nested grids
col 8
Rowcol 4 col 4 col 4
Row col 4
![Page 183: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/183.jpg)
Nested grids
col 8
Rowcol 4 col 4 col 4
Row col 4
![Page 184: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/184.jpg)
![Page 185: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/185.jpg)
![Page 186: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/186.jpg)
![Page 187: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/187.jpg)
row
row
![Page 188: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/188.jpg)
row
row
col 4
![Page 189: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/189.jpg)
row
row
col 4 col 8
![Page 190: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/190.jpg)
row
row
col 4 col 8
![Page 191: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/191.jpg)
row
row
col 4 col 8
![Page 192: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/192.jpg)
row
row
col 4 col 8
col 4
![Page 193: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/193.jpg)
row
row
col 4 col 8
col 4 col 8
![Page 194: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/194.jpg)
row
row
col 4 col 8
col 4 col 8
col 8
![Page 195: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/195.jpg)
row
row
col 4 col 8
col 4 col 8
col 8 col 4
![Page 196: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/196.jpg)
![Page 197: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/197.jpg)
![Page 198: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/198.jpg)
col 8
![Page 199: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/199.jpg)
col 8 col 4
![Page 200: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/200.jpg)
col 8 col 4
![Page 201: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/201.jpg)
col 8 col 4
col 6
![Page 202: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/202.jpg)
col 8 col 4
col 6 col 6
![Page 203: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/203.jpg)
col 8 col 4
col 6 col 6
![Page 204: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/204.jpg)
col 8 col 4
col 6 col 6
col 4
![Page 205: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/205.jpg)
col 8 col 4
col 6 col 6
col 4 col 4
![Page 206: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/206.jpg)
col 8 col 4
col 6 col 6
col 4 col 4 col 4
![Page 207: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/207.jpg)
Offsets
col 6
col 5 col 2 col 4 col 1
![Page 208: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/208.jpg)
Offsets
col 6
col 5 col 2 col 4 col 1
offset-3
![Page 209: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/209.jpg)
Offsets
col 6
col 5 col 2 col 4 col 1
offset-3
![Page 210: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/210.jpg)
Offsets
col 6
col 5 col 2 col 4 col 1
offset-33 col
![Page 211: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/211.jpg)
Offsets
col 6
col 5 col 2 col 4 col 1
offset-33 col 3 col
![Page 212: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/212.jpg)
Responsiveness
row col 3 col 3 col 3 col 3
![Page 213: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/213.jpg)
Responsiveness
row col 3 col 3 col 3 col 3
![Page 214: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/214.jpg)
Responsiveness
rowcol 3
col 3
col 3
col 3
![Page 215: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/215.jpg)
col 3 col 3 col 3 col 3
col 5 col 2 col 4 col 1
![Page 216: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/216.jpg)
col 3 col 3 col 3 col 3
col 5 col 2 col 4 col 1
Order 1 Order 2 Order 3 Order 4
Order 5 Order 6
Order 7 Order 8
![Page 217: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/217.jpg)
When should they stack?
col-sm-
col-md-
col-lg-
750px
970px
1170px
never
![Page 218: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/218.jpg)
When should they stack?
col-sm-
col-md-
col-lg-
750px
970px
1170px
never
![Page 219: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/219.jpg)
When should they stack?
col-sm-
col-md-
col-lg-
750px
970px
1170px
col-xs- never
![Page 220: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/220.jpg)
Add some rows
<div class="container"> !
!
!
!
!
!
!
!
!
</div>
![Page 221: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/221.jpg)
Add some rows
<div class="container"> !
!
!
!
!
!
!
!
!
</div>
<div class="row"> !
!
</div> !
<div class="row"> !
!
</div>
![Page 222: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/222.jpg)
Add some rows
<div class="container"> !
!
!
!
!
!
!
!
!
</div>
<div class="row"> !
!
</div> !
<div class="row"> !
!
</div>
![Page 223: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/223.jpg)
Add some rows
<div class="container"> !
!
!
!
!
!
!
!
!
</div>
<div class="row"> !
!
</div> !
<div class="row"> !
!
</div>
![Page 224: HTML News Packages Lesson](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c828d04a7959691a8b45a0/html5/thumbnails/224.jpg)
Add some rows
<div class="row"> !
!
!
!
!
!
!
!
</div>
<div class="col-‐sm-‐8 col-‐sm-‐offset-‐2"> !
</div>