Question

Create a webpage with CSS Box Model: Create a basic web page using the 5 required...

Create a webpage with CSS Box Model:

  1. Create a basic web page using the 5 required html tags.
  2. Add paragraph tags and enclosed them with a div element.
  3. Using the CSS Box Model, style the div element to have a total width of 350px and a height of 250px.
    • It should have 10px padding on all sides,
    • a gray border of 5px on all sides,
    • and 15px margins on both sides but none on the top and bottom.
  4. Add a light blue background to the div element.
  5. Type in the formula that you used to calculate the width and height.
  6. Scroll any overflow text so that the formulas do not expand the div element.
Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

<!DOCTYPE html>
<html>
<head>
<title>Box Model</title>

<style>
.style {
width: 350;
height: 250px;
padding: 10px;
border: 10px solid gray;
margin: 0px 15px;
background-color: lightblue;
overflow-y: scroll;
}
</style>

</head>
<body>
<div class='style'>
<p>Hello World</p>
</div>
</body>
</html>

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
Case-Based Critical Thinking Questions Case 6.1 Andy designed a web page for a product-oriented industry using...
Case-Based Critical Thinking Questions Case 6.1 Andy designed a web page for a product-oriented industry using CSS properties. He used several HTML tags to create the web page. He also used tables to ensure that data management is easy. Andy has created a table for product details where "Product Name" and "Product Price" are the headers of the table. Which of the following style rules should he add to place a border of 10-pixels around the table with a white...
8- Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following...
8- Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML tags to design your webpage <h1>…</h1> , <h3>… </h3> , <h6>… </h6> , <p>…</p> , <b> …</b> , <i>…</ i>, <a…..> </a>, <img…..> , <table>….</table> , <div> …</div>, <form>…</ form>, <input type=“text”>, and <input type=“submit”> Use an external css to change the default style of your webpage. You must use at least one element selector, one id selector, and one class selector Using...
Open the debug3-4.css file. The body element should have a width that is 90% of the...
Open the debug3-4.css file. The body element should have a width that is 90% of the width of the browser window ranging from a minimum of 600 pixels up to a maximum of 1024 pixels. Fix the syntax errors in the body style rule that defines the width of the web page. The style rule for the body element sets up a grid layout for the page. However, there are several errors in defining the grid areas, grid columns, and...
What I need to do :) Go to the code_scroll.css file and create a style rule...
What I need to do :) Go to the code_scroll.css file and create a style rule for the section element with the id container with the following styles: 1. Set the width of the element to 900 pixels and the height to 370 pixels. 2. Horizontally center the element by adding a 10 pixel top/bottom margin and set the left/right margin to auto. 3. Place the element with relative positioning, setting the top value to 30 pixels and the left...
[5 pts] An element with no closing tag is called which of the following? an attribute...
[5 pts] An element with no closing tag is called which of the following? an attribute an empty element a Socratic element a hermit element [5 pts] <a href="#info">Click Here</a> The above HTML is an example of which of the following? An external link An internal link An anonymous function A source attribute [5 pts] Which of the following should be primarily responsible for the design and formatting of a Web page? CSS HTML JavaScript XML [5 pts]   The following:...
TASK 2: Open numberic-variable_problem.js file in a text editor (e.g., NotePad++). What is the syntax error...
TASK 2: Open numberic-variable_problem.js file in a text editor (e.g., NotePad++). What is the syntax error in the JavaScript file? Find error message in console in a browser’s developer tool. Fix that error and reload the web page in browser. What is the change in the content displayed in the web page after fix the syntax error in the JavaScript code? Replace the line#18 statement (el.textContent = '$' + total;) in the JavaScript code with    el.textContent = '$' + total.toFixed(3);...
Challenge 5 Read ALL of the instructions carefully before starting the exercise! Dear Colleague, Earlier today...
Challenge 5 Read ALL of the instructions carefully before starting the exercise! Dear Colleague, Earlier today I built my fourth website using HTML5 and CSS3. This time I wanted to try using CSS float layout options on a website dedicated to my favorite topic: robotics. I wanted my website to look like what is shown in Figure 1 (see below). However, after giving it my best effort, things once again didn’t turn out the way I wanted (see the code...
Please linked both files. For this assignment you need to create a ToDo list using Javascript,...
Please linked both files. For this assignment you need to create a ToDo list using Javascript, along with HTML and CSS. Begin by creating a HTML page called todo.html. Then create a Javascript file called todo.js and link it in to the HTML page using a script tag. All Javascript for the assignment must be in the separate file. (For CSS, feel free to include styles in a style block at the top of the HTML page, or to link...
Section 1.1: Creating the First Table Locate the HTML comment that reads "table 1" just below...
Section 1.1: Creating the First Table Locate the HTML comment that reads "table 1" just below the opening body tag. Add a table tag with the following specifications using the style attribute and CSS: width with a value of 650 pixels a margin set to auto – this will center the table within the web page a border set to none - this removes the table border Add a table row (<tr>) Add a table data container tag (<td></td>) Within...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial,...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial, sans-serif; font-size: 100%; } /* outer container */    #wrapper { width: 960px; margin: 50px auto; padding: 0px; background-color: rgb(255, 255, 255); /* white */ border: 1px solid #000; /* black */ }    header h1 { text-align: center; }    nav { text-align: center; background: rgb(175, 196, 206); }    address figure { text-align: center; } </style> </head> <body> <div id="wrapper"> <!-- outer...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT