Download - CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector
![Page 1: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/1.jpg)
CSS Part IIUC Berkeley Graduate School of Journalism
![Page 2: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/2.jpg)
Review
p { color : black; font-size : 12px; border : 1px solid blue;
}
![Page 3: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/3.jpg)
Review
p { color : black; font-size : 12px; border : 1px solid blue;
}
![Page 4: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/4.jpg)
Review
p { color : black; font-size : 12px; border : 1px solid blue;
}
selector
![Page 5: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/5.jpg)
Review
p { color : black; font-size : 12px; border : 1px solid blue;
}
selector
![Page 6: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/6.jpg)
Review
p { color : black; font-size : 12px; border : 1px solid blue;
}
selector
properties
![Page 7: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/7.jpg)
Review
p { color : black; font-size : 12px; border : 1px solid blue;
}
selector
properties
![Page 8: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/8.jpg)
Review
p { color : black; font-size : 12px; border : 1px solid blue;
}
selector
properties
values
![Page 9: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/9.jpg)
Review
<p id="textblock"> Hello World </p>
CSS
HTML
#textblock{ color:black; border:1px solid blue; font-size:12px; }
Hello World
![Page 10: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/10.jpg)
Review
![Page 11: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/11.jpg)
Review<html>
</html>
![Page 12: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/12.jpg)
Review<html>
</html>
<head>
</head>
![Page 13: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/13.jpg)
Review<html>
</html>
<head>
</head>
<body>
</body>
![Page 14: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/14.jpg)
Review<html>
</html>
<head>
</head>
<body>
</body>
<style> h1{ color:green; }
</style>
![Page 15: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/15.jpg)
Review<html>
</html>
<head>
</head>
<body>
</body>
<style> h1{ color:green; }
</style>
<h1> Content goes here </h1>
![Page 16: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/16.jpg)
Review
div { color : black; font-size : 10px;
}
#oneitem { color : black; font-size : 10px;
}
.group { color : black; font-size : 10px;
}
![Page 17: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/17.jpg)
Review
div { color : black; font-size : 10px;
}
#oneitem { color : black; font-size : 10px;
}
.group { color : black; font-size : 10px;
}
Type (name) selector
![Page 18: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/18.jpg)
Review
div { color : black; font-size : 10px;
}
#oneitem { color : black; font-size : 10px;
}
.group { color : black; font-size : 10px;
}
Type (name) selector ID selector
![Page 19: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/19.jpg)
Review
div { color : black; font-size : 10px;
}
#oneitem { color : black; font-size : 10px;
}
.group { color : black; font-size : 10px;
}
Type (name) selector ID selector Class selector
![Page 20: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/20.jpg)
Review
div { color : black; font-size : 10px;
}
#oneitem { color : black; font-size : 10px;
}
.group { color : black; font-size : 10px;
}
Type (name) selector ID selector Class selector
• ID selectors can only be used once, while Class selectors can be used over and over to group similar items.
• IDs and Classes are arbitrary names we pick (hopefully meaningful)
![Page 21: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/21.jpg)
Review
<div> <h3>Hello World</h3>
</div>
<div> <p>Lorem Ipsum</p>
</div>
<div> <img src="photo.jpg" alt="">
</div>
div { color : black; font-size : 10px;
}
![Page 22: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/22.jpg)
Review
div { color : black; font-size : 10px;
}
<div> <h3>Hello World</h3>
</div>
<div> <p>Lorem Ipsum</p>
</div>
<div> <img src="photo.jpg" alt="">
</div>
![Page 23: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/23.jpg)
Review
<div id="oneitem"> <h3>Hello World</h3>
</div>
<div> <p>Lorem Ipsum</p>
</div>
<div> <img src="photo.jpg" alt="">
</div>
#oneitem { color : black; font-size : 10px;
}
![Page 24: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/24.jpg)
Review
<div id="oneitem"> <h3>Hello World</h3>
</div>
<div> <p>Lorem Ipsum</p>
</div>
<div> <img src="photo.jpg" alt="">
</div>
#oneitem { color : black; font-size : 10px;
}
id="oneitem">
![Page 25: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/25.jpg)
Review
<div> <h3>Hello World</h3>
</div>
<div class="group"> <p>Lorem Ipsum</p>
</div>
<div class="group"> <img src="photo.jpg" alt="">
</div>
.group { color : black; font-size : 10px;
}
![Page 26: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/26.jpg)
Review
<div> <h3>Hello World</h3>
</div>
<div class="group"> <p>Lorem Ipsum</p>
</div>
<div class="group"> <img src="photo.jpg" alt="">
</div>
.group { color : black; font-size : 10px;
}
class="group">
class="group">
![Page 27: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/27.jpg)
Two new ways to write selectors
![Page 28: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/28.jpg)
Comma separated
p, div, h1 { color : black; font-size : 12px;
}
![Page 29: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/29.jpg)
Comma separated
p, div, h1 { color : black; font-size : 12px;
}
p { color:black; font-size:12px;
}
div { color:black; font-size:12px;
}
h1 { color:black; font-size:12px;
}
![Page 30: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/30.jpg)
HTML:
CSS:#container, #wrapper, #sidebar{
background: orange;
}
<div id="container></div>
<div id="wrapper"></div>
<div id="sidebar"></div>
<div id="aside"></div>
![Page 31: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/31.jpg)
HTML:
CSS:#container, #wrapper, #sidebar{
background: orange;
}
<div id="container></div>
<div id="wrapper"></div>
<div id="sidebar"></div>
<div id="aside"></div> Commas allow the CSS rule to be applied to multiple selectors
![Page 32: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/32.jpg)
Next way: Space Separated
![Page 33: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/33.jpg)
Space separated
div h1 { color : black; font-size : 12px;
}
#container h2 { color : green; font-size : 12px;
}
#wrapper .out { color : blue; font-size : 12px;
}
![Page 34: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/34.jpg)
Space separated
div h1 { color : black; font-size : 12px;
}
#container h2 { color : green; font-size : 12px;
}
#wrapper .out { color : blue; font-size : 12px;
}
only h1 inside div tag
![Page 35: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/35.jpg)
Space separated
div h1 { color : black; font-size : 12px;
}
#container h2 { color : green; font-size : 12px;
}
#wrapper .out { color : blue; font-size : 12px;
}
only h1 inside div tag only h2 inside container
![Page 36: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/36.jpg)
Space separated
div h1 { color : black; font-size : 12px;
}
#container h2 { color : green; font-size : 12px;
}
#wrapper .out { color : blue; font-size : 12px;
}
only h1 inside div tag only h2 inside container only .out inside #wrapper
![Page 37: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/37.jpg)
HTML:
CSS:#container p{ background: orange; }
<p>Hello World</p>
<div id="container"> <p>Hola</p> <p>Bonjour</p> <p>Ciao</p> <a href="http://google.com"></a> </div>
![Page 38: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/38.jpg)
HTML:
CSS:#container p{ background: orange; }
<p>Hello World</p>
<div id="container"> <p>Hola</p> <p>Bonjour</p> <p>Ciao</p> <a href="http://google.com"></a> </div>
Spaces in the selector indicate "nested" elements, or "child" elements
![Page 39: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/39.jpg)
Pop Quiz
![Page 40: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/40.jpg)
Which of the HTML tags is being targeted by the following CSS?
.headlines{ }
<div id="headlines"> </div>
<div> </div>
<div class="headlines"> </div>
1. 2. 3.
![Page 41: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/41.jpg)
Which of the HTML tags is being targeted by the following CSS?
.headlines{ }
<div id="headlines"> </div>
<div> </div>
<div class="headlines"> </div>
1. 2. 3.
<div class="headlines"> </div>
![Page 42: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/42.jpg)
Which of the HTML tags is being targeted by the following CSS?
#container{ }
<div id="container"> </div>
<div> </div>
<div class="container"> </div>
1. 2. 3.
![Page 43: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/43.jpg)
Which of the HTML tags is being targeted by the following CSS?
#container{ }
<div id="container"> </div>
<div> </div>
<div class="container"> </div>
1. 2. 3.
<div id="container"> </div>
![Page 44: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/44.jpg)
Which of the HTML tags is being targeted by the following CSS?
.items{ }
<div class="items"> </div>
<div> </div>
<div class="items"> </div>
1. 2. 3.
![Page 45: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/45.jpg)
Which of the HTML tags is being targeted by the following CSS?
.items{ }
<div class="items"> </div>
<div> </div>
<div class="items"> </div>
1. 2. 3.
<div class="items"> </div>
<div class="items"> </div>
![Page 46: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/46.jpg)
Which of the HTML tags is being targeted by the following CSS?
div{ }
<div id="container"> </div>
<div> </div>
<div class="container"> </div>
1. 2. 3.
![Page 47: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/47.jpg)
Which of the HTML tags is being targeted by the following CSS?
div{ }
<div id="container"> </div>
<div> </div>
<div class="container"> </div>
1. 2. 3.
<div id="container"> </div>
<div> </div>
<div class="container"> </div>
![Page 48: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/48.jpg)
Which of the HTML tags is being targeted by the following CSS?
#quote, .citation{ }
<div id="quote"> </div>
<div> </div>
<div class="citation"> </div>
1. 2. 3.
![Page 49: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/49.jpg)
Which of the HTML tags is being targeted by the following CSS?
#quote, .citation{ }
<div id="quote"> </div>
<div> </div>
<div class="citation"> </div>
1. 2. 3.
<div id="quote"> </div>
<div class="citation"> </div>
![Page 50: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/50.jpg)
Which of the HTML tags is being targeted by the following CSS?
.citation p{ }
<div class="citation">
<p>Lorem Ipsum</p> <p>Lorem Ipsum</p>
</div>
<p>Lorem Ipsum</p>
<div id="container"> <p>Lorem Ipsum</p> </div>
1.
2.
3.
![Page 51: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/51.jpg)
Which of the HTML tags is being targeted by the following CSS?
.citation p{ }
<div class="citation">
<p>Lorem Ipsum</p> <p>Lorem Ipsum</p>
</div>
<p>Lorem Ipsum</p>
<div id="container"> <p>Lorem Ipsum</p> </div>
1.
2.
3.
![Page 52: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/52.jpg)
Comma separated
Space separated
apply the same rules to multiple elements
apply the rules to only elements nested within another element
![Page 53: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/53.jpg)
<div> tags
![Page 54: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/54.jpg)
Working with <div> tags
![Page 55: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/55.jpg)
Working with <div> tags
• By default, div boxes are invisible.
![Page 56: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/56.jpg)
Working with <div> tags
• By default, div boxes are invisible.
• By default a box will have a width of "auto", or the full width of its container.
![Page 57: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/57.jpg)
Working with <div> tags
• By default, div boxes are invisible.
• By default a box will have a width of "auto", or the full width of its container.
• By default a box will have a height that conforms to the content of that box.
![Page 58: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/58.jpg)
Working with <div> tags
• By default, div boxes are invisible.
• By default a box will have a width of "auto", or the full width of its container.
• By default a box will have a height that conforms to the content of that box.
• If you set a height in CSS, that overrides the content.
![Page 59: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/59.jpg)
Working with <div> tags
<div></div>
CSS
HTML
div {
}
![Page 60: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/60.jpg)
Working with <div> tags
• By default, div boxes are invisible.
• By default a box will have a width of 100%, or the full width of its container.
• By default a box will have a height that conforms to the content of that box.
• If you set a height in CSS, that overrides the content.
![Page 61: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/61.jpg)
Working with <div> tags
• By default, div boxes are invisible.
• By default a box will have a width of 100%, or the full width of its container.
• By default a box will have a height that conforms to the content of that box.
• If you set a height in CSS, that overrides the content.
![Page 62: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/62.jpg)
Working with <div> tags
<div></div>
CSS
HTML
div {
}
![Page 63: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/63.jpg)
Working with <div> tags
<div></div>
CSS
HTML
div {
}
border:1px solid black;
![Page 64: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/64.jpg)
Working with <div> tags
• By default, div boxes are invisible.
• By default a box will have a width of 100%, or the full width of its container.
• By default a box will have a height that conforms to the content of that box.
• If you set a height in CSS, that overrides the content.
![Page 65: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/65.jpg)
Working with <div> tags
• By default, div boxes are invisible.
• By default a box will have a width of 100%, or the full width of its container.
• By default a box will have a height that conforms to the content of that box.
• If you set a height in CSS, that overrides the content.
![Page 66: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/66.jpg)
Working with <div> tags
<div></div>
CSS
HTML
div {
}
border:1px solid black;
![Page 67: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/67.jpg)
Working with <div> tags
<div></div>
CSS
HTML
div {
}
border:1px solid black;
Hi World</div>
Hi World
![Page 68: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/68.jpg)
Working with <div> tags
• By default, div boxes are invisible.
• By default a box will have a width of 100%, or the full width of its container.
• By default a box will have a height that conforms to the content of that box.
• If you set a height in CSS, that overrides the content.
![Page 69: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/69.jpg)
Working with <div> tags
• By default, div boxes are invisible.
• By default a box will have a width of 100%, or the full width of its container.
• By default a box will have a height that conforms to the content of that box.
• If you set a height in CSS, that overrides the content.
![Page 70: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/70.jpg)
Working with <div> tagsCSS
HTML
div {
}
border:1px solid black; Hi World
![Page 71: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/71.jpg)
Working with <div> tags
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</div>
CSS
HTML
div {
}
border:1px solid black; Hi WorldLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
![Page 72: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/72.jpg)
Working with <div> tags
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</div>
CSS
HTML
div {
}
border:1px solid black;height:10px;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
![Page 73: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/73.jpg)
Working with <div> tags
• By default, div boxes are invisible.
• By default a box will have a width of 100%, or the full width of its container.
• By default a box will have a height that conforms to the content of that box.
• If you set a height in CSS, that overrides the content.
![Page 74: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/74.jpg)
Working with <div> tags
• By default, div boxes are invisible.
• By default a box will have a width of 100%, or the full width of its container.
• By default a box will have a height that conforms to the content of that box.
• If you set a height in CSS, that overrides the content.
![Page 75: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/75.jpg)
CSSISAWESOME
![Page 76: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/76.jpg)
![Page 77: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/77.jpg)
![Page 78: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/78.jpg)
![Page 79: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/79.jpg)
![Page 80: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/80.jpg)
![Page 81: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/81.jpg)
The Box Model
![Page 82: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/82.jpg)
Margins, Padding, Border
he l lo
![Page 83: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/83.jpg)
Margins, Padding, Border
he l loBorder
![Page 84: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/84.jpg)
Margins, Padding, Border
he l loBorder Padding
![Page 85: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/85.jpg)
Margins, Padding, Border
he l loMargin Border Padding
![Page 86: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/86.jpg)
Margins, Padding, Border
he l loMargin Border Padding
Width
![Page 87: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/87.jpg)
Box Model
Any padding, borders or margin are in addition to the width of the box.
![Page 88: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/88.jpg)
<div> box, with the width set to 960px
960px
![Page 89: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/89.jpg)
Create another <div> box inside, also set it to 960px
960px
![Page 90: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/90.jpg)
Create another <div> box inside, also set it to 960px
960px
960px
![Page 91: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/91.jpg)
Give it a border of 5px
960px
![Page 92: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/92.jpg)
Give it a border of 5px
960px
![Page 93: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/93.jpg)
Give it a border of 5px
960px
960px
![Page 94: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/94.jpg)
Margins, Padding, Width
he l lo
![Page 95: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/95.jpg)
Margins, Padding, Width
he l loBorder
![Page 96: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/96.jpg)
Margins, Padding, Width
he l loBorder Padding
![Page 97: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/97.jpg)
Margins, Padding, Width
he l loMargin Border Padding
![Page 98: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/98.jpg)
Margins, Padding, Width
he l loMargin Border Padding
Width
![Page 99: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/99.jpg)
Review
![Page 100: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/100.jpg)
What is the width of this box?
he l lo20px 2px 10px
200px
![Page 101: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/101.jpg)
200 pixels
What is the width of this box?
he l lo20px 2px 10px
200px
![Page 102: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/102.jpg)
What is the width and padding combined?
he l lo20px 2px 10px
200px
![Page 103: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/103.jpg)
220 pixels
What is the width and padding combined?
he l lo20px 2px 10px
200px
![Page 104: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/104.jpg)
What is the width and padding and border combined?
he l lo20px 2px 10px
200px
![Page 105: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/105.jpg)
224 pixels
What is the width and padding and border combined?
he l lo20px 2px 10px
200px
![Page 106: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/106.jpg)
What is the total (outer) width?
he l lo20px 2px 10px
200px
![Page 107: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/107.jpg)
200 + 20 + 20 + 10 + 10 + 2 + 2 =
264 pixels
What is the total (outer) width?
he l lo20px 2px 10px
200px
![Page 108: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/108.jpg)
200 + 20 + 20 + 10 + 10 + 2 + 2 =
264 pixels
What is the total (outer) width?
he l lo20px 2px 10px
200px
264px
![Page 109: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/109.jpg)
padding and margins
padding:
![Page 110: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/110.jpg)
padding and margins
padding: 10px;
![Page 111: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/111.jpg)
padding and margins
padding: 10px;
padding-top: 10px;padding-left: 10px;padding-bottom: 10px;padding-right: 10px;
![Page 112: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/112.jpg)
padding and margins
padding: 10px 5px 1px 0;
![Page 113: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/113.jpg)
padding and margins
padding: 10px 5px 1px 0;
top
![Page 114: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/114.jpg)
padding and margins
padding: 10px 5px 1px 0;
top right
![Page 115: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/115.jpg)
padding and margins
padding: 10px 5px 1px 0;
top right bottom
![Page 116: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/116.jpg)
padding and margins
padding: 10px 5px 1px 0;
top right bottom left
![Page 117: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/117.jpg)
padding and margins
margin: 5px 15px 1px 10px;
![Page 118: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/118.jpg)
padding and margins
margin: 5px 15px 1px 10px;
top
![Page 119: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/119.jpg)
padding and margins
margin: 5px 15px 1px 10px;
top right
![Page 120: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/120.jpg)
padding and margins
margin: 5px 15px 1px 10px;
top right bottom
![Page 121: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/121.jpg)
padding and margins
margin: 5px 15px 1px 10px;
top right bottom left
![Page 122: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/122.jpg)
padding and margins
padding: 10px 2px;
![Page 123: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/123.jpg)
padding and margins
padding: 10px 2px;
topbottom
![Page 124: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/124.jpg)
padding and margins
padding: 10px 2px;
topbottom
rightleft
![Page 125: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/125.jpg)
Pop Quiz
![Page 126: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/126.jpg)
Explain the size of the margins around the box
margin: 5px 25px 6px 20px;
![Page 127: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/127.jpg)
Top is 5px, right is 25px, bottom is 6px, left is 20px;
Explain the size of the margins around the box
margin: 5px 25px 6px 20px;
![Page 128: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/128.jpg)
Explain the size of the padding inside this box
padding: 1px 1px 1px 40px;
![Page 129: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/129.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 130: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/130.jpg)
Explain the size of the margins around the box
margin: 0px 5px;
![Page 131: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/131.jpg)
Top and bottom are 0 pixels,the left and right side is 5 pixels
Explain the size of the margins around the box
margin: 0px 5px;
![Page 132: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/132.jpg)
Explain the size of the padding inside the box
padding: 15px;
![Page 133: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/133.jpg)
All sides are 15 pixels
Explain the size of the padding inside the box
padding: 15px;
![Page 134: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/134.jpg)
Applying multiple classes to an HTML element
![Page 135: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/135.jpg)
Applying multiple classes to an HTML tag
<div class="container blog"></div>
![Page 136: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/136.jpg)
Applying multiple classes to an HTML tag
<div class="container blog"></div>
![Page 137: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/137.jpg)
Applying multiple classes to an HTML tag
<div class="container blog"></div>
![Page 138: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/138.jpg)
Applying multiple classes to an HTML tag
<div class="container blog"></div>
.container { width: 250px;
} .blog{ border:1px solid black; }
![Page 139: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/139.jpg)
Background Images
![Page 140: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/140.jpg)
HTML:
CSS:div { border:1px solid black; width: 300px; height: 200px; }
<div></div>
![Page 141: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/141.jpg)
HTML:
CSS:div { border:1px solid black; width: 300px; height: 200px; background-color: orange; }
<div></div>
![Page 142: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/142.jpg)
HTML:
CSS:div { border:1px solid black; width: 300px; height: 200px; background-color: orange; background-image: url(photo.jpg); }
<div></div>
![Page 143: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/143.jpg)
HTML:
CSS:div { border:1px solid black; width: 300px; height: 200px; background-color: orange; background-image: url(photo.jpg); background-repeat: no-repeat; }
<div></div>
![Page 144: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/144.jpg)
HTML:
CSS:
div { border:1px solid black; width: 300px; height: 200px; background-color: orange; background-image: url(photo.jpg); background-repeat: no-repeat; background-size: contain; }
<div></div>
![Page 145: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/145.jpg)
HTML:
CSS:
div { border:1px solid black; width: 300px; height: 200px; background-color: orange; background-image: url(photo.jpg); background-repeat: no-repeat; background-size: cover; }
<div></div>
![Page 146: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/146.jpg)
HTML:
CSS:
div { border:1px solid black; width: 300px; height: 200px; background-color: orange; background-image: url(photo.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
<div></div>
![Page 147: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/147.jpg)
HTML:
CSS:
div { border:1px solid black; width: 300px; height: 200px; background-color: orange; background-image: url(photo.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
<div></div>
![Page 148: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/148.jpg)
background-size: contain;
Fit the image in the box. Never cut any portion of the image off, even if it means leaving empty space.
background-size: cover;
Fill the image in the box, even if a piece gets cut off. Leave no empty space.
![Page 149: CSS Part 2 · Review p { color : black; font-size : 12px; border : 1px solid blue; } selector](https://reader033.vdocuments.site/reader033/viewer/2022060523/6052cfaa3117417d0e79efc6/html5/thumbnails/149.jpg)
background-size: cover;background-position: center;
background-size: cover;background-position: left;