Homework Help is Here – Start Your Trial Now!
Engineering
Computer Engineering
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

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)
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...
See similar textbooks
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`. ![Box Model Diagram](#D1BCE3) - **Box Model** - *Content Box* - Background color: `#227C9D` - Description: Displays the default CSS box-sizing behavior. If you set an element's width to 100 pixels, the element 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 100 pixels. - *Border Box* - Background color: `#FE6D73` - Description: Uses this browser feature to account for any border and padding in the element’s width (for example if width is set to 100 pixels). Your set width minus any padding and border width. Thus pixels will subtract any border or padding values also and the content box will shrink to fit within that width. - Background color for the entire section: `#D1BCE3` - Each box has a text color of `#FEF9EF`. **Instructions:** - Complete the style rules in `color-styles.css` to match the color scheme shown above. Consider the text color as well. - The overflow issue becomes more apparent after applying a background color. **Additional Task:** - Add a style rule in the embedded style sheet that applies scroll functionality to divs to resolve the overflow issue.
Transcribed Image Text:**Part Two** The following image shows the background color for various elements in `index.html`. ![Box Model Diagram](#D1BCE3) - **Box Model** - *Content Box* - Background color: `#227C9D` - Description: Displays the default CSS box-sizing behavior. If you set an element's width to 100 pixels, the element 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 100 pixels. - *Border Box* - Background color: `#FE6D73` - Description: Uses this browser feature to account for any border and padding in the element’s width (for example if width is set to 100 pixels). Your set width minus any padding and border width. Thus pixels will subtract any border or padding values also and the content box will shrink to fit within that width. - Background color for the entire section: `#D1BCE3` - Each box has a text color of `#FEF9EF`. **Instructions:** - Complete the style rules in `color-styles.css` to match the color scheme shown above. Consider the text color as well. - The overflow issue becomes more apparent after applying a background color. **Additional Task:** - Add a style rule in the embedded style sheet that applies scroll functionality to divs to resolve 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

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Similar questions
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
SEE MORE TEXTBOOKS