Using Divs for Layout Using HTML

Program:

<!DOCTYPE html>

<html>

<head>

<style>

.container {

width: 80%;

margin: 0 auto;

text-align: center;

}

.box {

background-color: lightblue;

padding: 20px;

margin-bottom: 10px;

}

</style>

</head>

<body>

<div class="container">

<h2>Content with Divs</h2>

<div class="box">

<p>This is box 1.</p>

</div>

<div class="box">

<p>This is box 2.</p>

</div>

</body>

</html>

Explanation:

Questions and Answers:

What does the <style> tag do?
- The <style> tag is used to include CSS style rules within an HTML document. The CSS rules within the <style> tags define the look and layout of the content.
What is the purpose of the .container and .box in the CSS?
- .container and .box are CSS classes. The .container class is applied to the div that wraps the content, and it sets the width, margin, and text alignment of the content. The .box class is applied to each individual box, and it sets the background color, padding, and margin.
What does the width, margin, and text-align properties do in CSS?
- width sets the width of an element. margin sets the space around an element. text-align sets the horizontal alignment of the text.
What does the <div> tag represent?
- The <div> tag is a container unit that encapsulates other page elements and divides the HTML document into sections. Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once.
How can I add more boxes to the HTML code?
- To add more boxes, you can simply add more <div class="box"> elements within the <div class="container"> tag. Each new <div class="box"> will create a new box.
Can I change the order of the boxes in the HTML code?
- Yes, you can change the order of the boxes by changing the order of the <div class="box"> elements within the <div class="container"> tag.

CODEFILLSHUNGER