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.

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>

Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

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...
[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:...
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...
<!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