6.2 Student Activity

Create a Content Box with Padding, Margins, and Borders

Create a content box with a heading, paragraph, and image. Apply padding, margins, and borders to each element. Experiment with different border styles and content overflow settings.

  1. Step 1:

    • Open a code editor and create an HTML file named box-model.html. Add a simple structure like below:

      <!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</title>
  <style>
    .box {
      width: 300px;
      height: 200px;
      padding: 20px;
      margin: 30px;
      border: 2px solid black;
      background-color: lightgray;
    }
    img {
      max-width: 100%;
      height: auto;
    }
   .box p {
        color: #555;
        font-size: 1em;
        line-height: 1.6;
        margin-bottom: 20px;
        padding: 10px;
        background-color: #f9f9f9;
        border-left: 4px solid #4caf50; /* Green left border */
      }
  </style>
</head>
<body>
  <div class="box">
    <h1>Box Model Example</h1>
    <p>This is a content box demonstrating the CSS box model. The box has padding, margins, and borders applied to it.</p>
    <img src="https://www.coderepublics.com/CSS/CSS%20Images/css%20box%20model.webp"
        alt="CSS Box Model Image">
  </div>
</body>
</html>

  2. Step 2:

    • Add Margins and Padding: Inside the CSS for the .box class, change the padding and margin values to see how it affects the layout. For example:

      padding: 40px;
margin: 50px;

  3. Step 3:

    • Experiment with Borders: Try changing the border style, width, and color:

      border: 5px dashed red;

  4. Step 4:

    • Overflow Setting: Add content that exceeds the box's height and experiment with the overflow property:

    • overflow: hidden; – Content is clipped and not visible

      overflow: hidden;

  5. Step 5:

    • Test the page in the browser to see how padding, margin, border, and overflow affect the layout of the content box.

Challenge Activity: Advanced Content Box Layout with CSS Styling

In this activity, students will create an advanced content box layout that contains a heading, a paragraph, a <select> dropdown, and an image. We will apply CSS box model properties such as padding, margins, overflow, and borders to each element for a refined layout.

Step-by-Step Procedure for Student Activity

Step 1: Create the HTML Structure

  1. Open your text editor and create a new HTML file named content-box.html.

  2. Add the following structure to your file. This structure includes a heading (<h2>), paragraph (<p>), dropdown (<select>), and an image (<img>).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced Content Box Layout</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="content-box">
    <h2>Choose Your Favorite Fruit</h2>
    <p>This is an advanced content box layout. You can select your favorite fruit from the dropdown below. The box has padding, margins, and an image that showcases different fruits.</p>

    <label for="fruit-select">Select a fruit:</label>
    <select id="fruit-select" name="fruit">
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="cherry">Cherry</option>
      <option value="grape">Grape</option>
    </select>

    <img src="https://via.placeholder.com/300x200" alt="Sample fruit image">

  </div>

</body>
</html>

Explanation of HTML Structure:

  • <div class="content-box">: A container for the content box, which wraps all the inner elements (heading, paragraph, select dropdown, and image).

  • <h2>: The heading inside the content box.

  • <p>: A descriptive paragraph explaining the content box.

  • <label> and <select>: A label and dropdown (<select>) for selecting a fruit.

  • <img>: An image element representing the topic (fruit in this case).

Step 2: Create the External CSS File

  1. In the same folder as your HTML file, create a new file named styles.css.

  2. Add the following CSS rules to style each element inside the content box:

/* General body styling */
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  margin: 20px;
}

/* Styling the content box */
.content-box {
  width: 350px;
  padding: 20px;
  margin: 30px auto;
  border: 2px solid #ccc;
  background-color: #ffffff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Ensure content stays within the box */
}

/* Heading styling */
.content-box h2 {
  color: #333;
  font-size: 1.8em;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0; /* Add underline effect */
}

/* Paragraph styling */
.content-box p {
  color: #555;
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border-left: 4px solid #4caf50; /* Green left border */
}

/* Select box styling */
.content-box select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
}

/* Image styling */
.content-box img {
  width: 100%; /* Ensures the image scales within the content box */
  height: auto;
  display: block;
  margin-top: 10px;
  border: 2px solid #e0e0e0;
}

/* Hover effect for the content box */
.content-box:hover {
  border-color: #000;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}

Explanation of CSS Styling:

  • body styling: Sets a general font style for the page and applies a background color and margin to ensure there's space around the page content.

  • .content-box:

    • width: 350px;: Fixes the width of the content box.

    • padding: 20px;: Adds padding inside the content box to create space between the border and content.

    • margin: 30px auto;: Adds space around the content box, with auto centering it horizontally.

    • border: 2px solid #ccc;: Gives the content box a border.

    • overflow: hidden;: Ensures content stays inside the box and doesn’t spill over.

    • box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);: Adds a subtle shadow effect to give depth.

  • .content-box h2:

    • Adds space between the heading and the paragraph (margin-bottom).

    • Adds a bottom border to separate the heading visually from the content below.

  • .content-box p:

    • Adds padding to the paragraph for readability.

    • Adds a left green border for a visual accent.

  • .content-box select:

    • Adds padding and makes the dropdown fill the width of the content box.

    • Styles the dropdown to look visually consistent with the box model.

  • .content-box img:

    • Makes the image responsive by setting the width to 100%.

    • Adds a border around the image.

  • .content-box:hover:

    • Changes the border color and box shadow when the user hovers over the content box, making it interactive.

Step 3: Test and View the Page

  1. Save both content-box.html and styles.css.

  2. Open the content-box.html file in your browser.

  3. You should see the content box with a heading, paragraph, select dropdown, and image, all styled with padding, margins, borders, and overflow control.

  4. Hover over the content box to see the border color and shadow effect change.

Full Example (HTML and CSS)

HTML (content-box.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced Content Box Layout</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="content-box">
    <h2>Choose Your Favorite Fruit</h2>
    <p>This is an advanced content box layout. You can select your favorite fruit from the dropdown below. The box has padding, margins, and an image that showcases different fruits.</p>

    <label for="fruit-select">Select a fruit:</label>
    <select id="fruit-select" name="fruit">
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="cherry">Cherry</option>
      <option value="grape">Grape</option>
    </select>

    <img src="https://via.placeholder.com/300x200" alt="Sample fruit image">

  </div>

</body>
</html>

CSS (styles.css):

/* General body styling */
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  margin: 20px;
}

/* Styling the content box */
.content-box {
  width: 350px;
  padding: 20px;
  margin: 30px auto;
  border: 2px solid #ccc;
  background-color: #ffffff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Ensure content stays within the box */
}

/* Heading styling */
.content-box h2 {
  color: #333;
  font-size: 1.8em;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0; /* Add underline effect */
}

/* Paragraph styling */
.content-box p {
  color: #555;
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border-left: 4px solid #4caf50; /* Green left border */
}

/* Select box styling */
.content-box select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px

Now, we want to display the selected fruit from the dropdown in the <p class="results"></p> element, you'll need to incorporate some JavaScript. The JavaScript will listen for a change in the <select> dropdown and update the text inside the .results paragraph with the selected fruit.

// HTML snippet for Paragraph to display the selected fruit
<!-- Paragraph to display the selected fruit -->
<p class="results"></p>

Add JavaScript code in your HTML file just before the end of </body> ending tag as follws:

// Selected option display code
<script>
    // Get the select element and the results paragraph
    const selectElement = document.getElementById('fruit-select');
    const resultsParagraph = document.querySelector('.results');

    // Function to update the results paragraph with the selected fruit
    function displaySelectedFruit() {
      const selectedFruit = selectElement.options[selectElement.selectedIndex].text;
      resultsParagraph.textContent = `You have selected: ${selectedFruit}`;
    }

    // Listen for changes in the dropdown and call the displaySelectedFruit function
    selectElement.addEventListener('change', displaySelectedFruit);
  </script>

Explanation of JavaScript:

  1. HTML Structure:

    • A <p class="results"></p> element is used to display the selected fruit.

  2. JavaScript:

    • selectElement: This selects the <select> element (fruit-select).

    • resultsParagraph: This selects the paragraph element where the selected fruit will be displayed.

    • displaySelectedFruit(): A function that gets the selected option's text using selectElement.options[selectElement.selectedIndex].text. It then updates the textContent of .results to show the selected fruit.

    • Event Listener: The change event listener listens for any change in the dropdown and triggers the displaySelectedFruit() function to update the results dynamically.

Updated Full HTML with JavaScript for Fruit Selection:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced Content Box Layout</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="content-box">
    <h2>Choose Your Favorite Fruit</h2>
    <p>This is an advanced content box layout. You can select your favorite fruit from the dropdown below. The box has padding, margins, and an image that showcases different fruits.</p>

    <!-- Dropdown for selecting fruit -->
    <label for="fruit-select">Select a fruit:</label>
    <select id="fruit-select" name="fruit">
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="cherry">Cherry</option>
      <option value="grape">Grape</option>
    </select>

    <!-- Paragraph to display the selected fruit -->
    <p class="results"></p>

    <img src="https://via.placeholder.com/300x200" alt="Sample fruit image">

  </div>

  <script>
    // Get the select element and the results paragraph
    const selectElement = document.getElementById('fruit-select');
    const resultsParagraph = document.querySelector('.results');

    // Function to update the results paragraph with the selected fruit
    function displaySelectedFruit() {
      const selectedFruit = selectElement.options[selectElement.selectedIndex].text;
      resultsParagraph.textContent = `You have selected: ${selectedFruit}`;
    }

    // Listen for changes in the dropdown and call the displaySelectedFruit function
    selectElement.addEventListener('change', displaySelectedFruit);
  </script>

</body>
</html>
Previous6.1 CSS Box Model & Layout BasicsNext6.3 Homework/Practice

Last updated