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 Ben • Add a style rule in the embedded style sheet that applies a scroll functionality to divs to solve the overflow issue

Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
icon
Related questions
Question

body {

}

.cb-title {

}

.bb-title {

}

.cb-btm {

}

.bb-btm {

}

Part Two
The following image shows the background color for various elements in index.html.
Вох Мodel
#D1BCE3
Content Box
#227C9D
I FEFSEF
SFE6073
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 Box
ontet gies you te detaut CSS b-iing behavie. f you etan
wide, nd the wih ef any bnder ar pading wille aldedte the final rendeed
wih, making the element wider tha 10p
Border Box
e l the beeracun fur any border and pudding
the valaes yeu specity fer an element widn and beight. if you set
elementwih 0 piels, ha 0 pisel will inclle any
dero paing yo a, and the oomu bo wil ik
aht that es width
Add a style rule in the embedded style sheet that applies a scroll functionality to divs to
solve the overflow issue
Transcribed Image Text:Part Two The following image shows the background color for various elements in index.html. Вох Мodel #D1BCE3 Content Box #227C9D I FEFSEF SFE6073 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 Box ontet gies you te detaut CSS b-iing behavie. f you etan wide, nd the wih ef any bnder ar pading wille aldedte the final rendeed wih, making the element wider tha 10p Border Box e l the beeracun fur any border and pudding the valaes yeu specity fer an element widn and beight. if you set elementwih 0 piels, ha 0 pisel will inclle any dero paing yo a, and the oomu bo wil ik aht that es width Add a style rule in the embedded style sheet that applies a scroll functionality to divs to solve the overflow issue
Expert Solution
Step 1

Answer:

Source Code:

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="color-style.css">
</head>

<body>
    <h1>Box Model</h1>
    <div>
        <div class="cb-title">
            Content Box
        </div>
        <div class="cb-btm">
            Fille your data
        </div>
    </div>

    <div>
        <div class="bb-title">
            Border Box
        </div>
        <div class="bb-btm">
            Fill your data
        </div>
    </div>
</body>

</html>
 
 
 
color-style.css:
 
body {
    background-color: #D1BCE3;
}

div {
    margin: auto;
}

h1 {
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.cb-title {
    color: white;
    background-color: #227C9D;
    width: 300px;
    padding: 10px 20px;
}

.cb-btm {
    background-color: #FEF9EF;
    width: 300px;
    height: 100px;
    padding: 10px 20px;
    overflow-y: auto;
    overflow-x: hidden;
}

.bb-title {
    color: white;
    margin-top: 50px;
    background-color: #FE6D73;
    width: 300px;
    padding: 10px 20px;
}

.bb-btm {
    background-color: #FEF9EF;
    width: 300px;
    height: 100px;
    padding: 10px 20px;
    overflow-y: auto;
    overflow-x: hidden;
}
steps

Step by step

Solved in 2 steps with 1 images

Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY