Scribd
Upload
14 views11 pages

Module 7 Week 13

The document is a learning module focused on the CSS box model, outlining its components such as content, padding, border, and margin, which are essential for structuring web pages. It includes practical examples of HTML and CSS code demonstrating the application of the box model in web design. Additionally, the module provides guidance on debugging CSS and emphasizes the importance of the box model for creating visually appealing and responsive web pages.

Uploaded by

Rica Guiuo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views11 pages

Module 7 Week 13

The document is a learning module focused on the CSS box model, outlining its components such as content, padding, border, and margin, which are essential for structuring web pages. It includes practical examples of HTML and CSS code demonstrating the application of the box model in web design. Additionally, the module provides guidance on debugging CSS and emphasizes the importance of the box model for creating visually appealing and responsive web pages.

Uploaded by

Rica Guiuo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

Buraga, R.L.

Learning Module in Integrative Programming and Technologies

Module 7

CSS BOX MODEL


Buraga, R.L. Learning Module in Integrative Programming and Technologies

Learning Outcomes:

At the end of the lesson, you are expected to:

 Discuss the CSS box model.

 Define the layout and spacing of elements, including


margins, borders, padding, and content areas, to
create visually structured web pages.

Learning Content

CSS box model


The CSS box model module defines the margin and padding
properties, which along with the height, width and border
properties(Mozilla.org, 2025).

Each box has a rectangular content area, inside which


any text, images, and other content is displayed that may be
surrounded by padding, a border, and a margin, on one or more
sides.

The padding is around the content, the border is around


the padding, and the margin sits outside the border.
Buraga, R.L. Learning Module in Integrative Programming and Technologies

Image Source: Perez, 2022

The CSS box model module defines physical (or "page


relative") properties such as margin-top and padding-top.
Flow-relative properties such as margin-block-start and
margin-inline-start (which relate to text direction) are
defined in Logical Properties and Values.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS Box Model - Stylish Design</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.box {
width: 350px;
background-color: #ffffff;
margin: 30px;
Buraga, R.L. Learning Module in Integrative Programming and Technologies

padding: 20px;
border: 8px solid #3498db;
border-radius: 10px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
text-align: center;
}
.box h2 {
margin: 0;
color: #3498db;
}
.box p {
color: #333;
font-size: 16px;
}
</style>
</head>
<body>
<div class="box">
<h2>Stylish Box Model</h2>
<p>This design applies margins, borders, padding,
and content effectively.</p>
</div>
</body>
</html>

Different Parts of CSS Box Model (W3Schools, 2025)


 Content - The content of the box, where text and images
appear
 Padding - Clears an area around the content. The padding
is transparent
 Border - A border that goes around the padding and
content
 Margin - Clears an area outside the border. The margin
is transparent

Debugging CSS with the box model


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Debugging CSS Box Model</title>
<style>
Buraga, R.L. Learning Module in Integrative Programming and Technologies

* {
outline: 1px solid red; /* Helps visualize the
box model */
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.box {
width: 350px;
background-color: #ffffff;
margin: 30px;
padding: 20px;
border: 8px solid #3498db;
border-radius: 10px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
text-align: center;
}
.box h2 {
margin: 10px 0;
color: #3498db;
}
.box p {
color: #333;
font-size: 16px;
}
/* Debugging styles */
.debug-box {
background-color: rgba(255, 0, 0, 0.1); /*
Transparent red to see overlapping */
margin: 20px;
padding: 15px;
border: 5px dashed red;
}
</style>
</head>
<body>
<div class="box debug-box">
<h2>Debugging Box Model</h2>
Buraga, R.L. Learning Module in Integrative Programming and Technologies

<p>Use DevTools (F12) to inspect margins, padding,


and borders.</p>
</div>
</body>
</html>

Guided Activity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Complete Web Page Example</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
header {
background: #3498db;
color: white;
text-align: center;
padding: 20px;
}
nav {
background: #2980b9;
padding: 10px;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
}
nav ul li {
position: relative;
margin: 0 15px;
}
Buraga, R.L. Learning Module in Integrative Programming and Technologies

nav ul li a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
}
nav ul li ul {
display: none;
position: absolute;
top: 35px;
left: 0;
background: #1f618d;
padding: 10px;
list-style: none;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
margin: 5px 0;
}
.container {
width: 80%;
margin: 20px auto;
padding: 20px;
background: white;
border: 5px solid #3498db;
border-radius: 10px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
section {
margin-bottom: 20px;
}
footer {
background: #2c3e50;
color: white;
text-align: center;
padding: 15px;
margin-top: 20px;
}
form {
display: flex;
flex-direction: column;
}
Buraga, R.L. Learning Module in Integrative Programming and Technologies

label, input, textarea, button {


margin-bottom: 10px;
padding: 10px;
}
button {
background: #3498db;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background: #1f618d;
}
</style>
</head>
<body>
<header>
<h1>My Sample Web Page</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Team</a></li>
<li><a href="#">History</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="container">
<section>
<h2>Welcome to My Web Page</h2>
<p>This is an example of a fully structured
web page with different HTML tags.</p>
</section>
<section>
Buraga, R.L. Learning Module in Integrative Programming and Technologies

<h2>Contact Us</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"
required>

<label for="email">Email:</label>
<input type="email" id="email"
name="email" required>

<label for="message">Message:</label>
<textarea id="message" name="message"
rows="4" required></textarea>

<button type="submit">Submit</button>
</form>
</section>
</div>
<footer>
<p>&copy; 2025 My Website. All rights
reserved.</p>
</footer>
</body>
</html>

 Header (<header>)
 Displays the title of the webpage.
 Uses background color, padding, and text alignment
for styling.

 Navigation Menu (<nav>)


 Contains an unordered list (<ul>) with menu items
(<li>).
 Submenus are implemented using nested lists and are
displayed on hover.
 CSS styling applies background color, padding, and
hover effects.

 Main Content (.container)


 A white box with padding, border, and shadow that
holds the main content.
 Uses the Box Model (margin, padding, border,
content) for styling.
Buraga, R.L. Learning Module in Integrative Programming and Technologies

 Sections (<section>)
 Contains headings (<h2>) and paragraphs (<p>) for
content display.
 The first section introduces the webpage.
 The second section contains a contact form.

 Contact Form (<form>)


 Includes:
o Text input (<input type="text">) for the user's
name.
o Email input (<input type="email">) for email
addresses.
o Textarea (<textarea>) for messages.
o Submit button (<button>) styled with hover
effects.

 Footer (<footer>)
 Displays a copyright message.
 Styled with a dark background color and centered
text.

 CSS Box Model Implementation


 Margins: Provide spacing around elements.
 Padding: Creates space inside elements, separating
content from borders.
 Borders: Applied to sections and the main container.
 Box Shadow: Enhances the container’s appearance.

 Debugging Features
 The box-sizing: border-box; ensures padding and
borders don’t increase element size.
 The outline: 1px solid red; helps visualize element
boundaries.

Additional References:
1. https://www.youtube.com/watch?v=W2kTZeKCch0
2. https://www.youtube.com/watch?v=M6coJNLFBWI
Buraga, R.L. Learning Module in Integrative Programming and Technologies

Assessment Task 7

1. Discuss the importance of the CSS Box Model in creating


visually appealing and responsive web pages.

References:

1. Mozilla.org. (2025). Mdn Web Docs. CSS Box model.


Retrieved from https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_box_model.

You might also like