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>).

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:

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):

CSS (styles.css):

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.

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

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:

Previous6.1 CSS Box Model & Layout BasicsNext6.3 Homework/Practice

Last updated