Part Two The following image shows the background color for various elements in index.html. Bох Model #DIBCE3 Content Box FESEF Border Box FEFSEF • Complete the style rules in color-styles.css to match the color scheme shown above. You will also need to consider text color to complete this task. • The overflow issue is more apparent after applying a background color вох МODEL Content Be • Add a style rule in the embedded style sheet that applies a scroll functionality to divs to solve the overflow issue
<!DOCTYPE html>
<html lang="en">
below here is color.css
<style>
body {
}
.cb-title {
}
.bb-title {
}
.cb-btm {
}
.bb-btm {
}
</style>
above here is color.css
<head>
<meta charset="UTF-8">
<title>Lab 9 (Week 10)</title>
<style>
@import url(./styles/box-styles.css);
@import url(./styles/color-styles.css);
</style>
</head>
<body>
<h1>Box Model</h1>
<div class=" cb-container light-shadow center-element round-borders max-width">
<div class="cb-title title-padding cb full-width">
<h3>Content Box</h3>
</div>
<div class="cb-btm body-padding cb full-width">
<p><code>content-box </code>gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px</p>
</div>
</div>
<div class="bb-container light-shadow center-element round-borders max-width">
<div class="bb-title title-padding bb full-width">
<h3>Border Box</h3>
</div>
<div class="bb-btm body-padding bb full-width">
<p><code>border-box</code> tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. </p>
<p>This is a testing paragraph</p>
</div>
</div>
</body>
</html>
Step by step
Solved in 2 steps with 1 images
