📝 Assignment: Inline vs Block Elements

Task 1: Observe the Difference (10 points)

Create the following and observe how they display:

Part A: Block Elements

<div style="background-color: lightblue; padding: 10px;">First Box</div>
<div style="background-color: lightgreen; padding: 10px;">Second Box</div>
<div style="background-color: lightyellow; padding: 10px;">Third Box</div>
        

Expected Result:

Part B: Inline Elements

<span style="background-color: lightblue; padding: 5px;">First Item</span>
<span style="background-color: lightgreen; padding: 5px;">Second Item</span>
<span style="background-color: lightyellow; padding: 5px;">Third Item</span>
        

Expected Result:

Question: What's the main difference you notice?

Task 2: Mixed Elements (15 points)

Create a paragraph that uses BOTH block and inline elements:

<div style="border: 2px solid blue; padding: 15px;">
    <h2>My Favorite Foods</h2>
    <p>
        I love <strong>pizza</strong> and <em>pasta</em>. 
        My favorite restaurant is <span style="color: red;">Italian Corner</span>.
    </p>
    <p>
        Visit their website at <a href="#">www.italiancorner.com</a>
    </p>
</div>
        

Expected Result:

Task 3: Width Experiment (15 points)

Try setting width on block vs inline elements and see what happens:

Part A: Block Element with Width

<div style="width: 200px; background-color: lightblue; padding: 10px;">
    I am 200px wide
</div>
        

Part B: Inline Element with Width (Won't Work!)

<span style="width: 200px; background-color: lightcoral; padding: 10px;">
    I tried to be 200px wide but I can't!
</span>
        

Expected Results:

Question: Why doesn't the span respect the width?

Task 4: Create a Contact Card (25 points)

Create a contact card using BOTH block and inline elements:

Requirements:

• Use <div> as the main container
• Use <h3> for the person's name
• Use <p> for job title
• Use <strong> to highlight "Email:" and "Phone:"
• Use <span> to color the email blue and phone green
• Use <a> for a clickable email link

Example Output:

Task 5: Navigation Menu (20 points)

Create a simple navigation menu using block and inline elements:

<nav style="background-color: #2c3e50; padding: 15px;">
    <a href="#" style="color: white; padding: 10px;">Home</a>
    <a href="#" style="color: white; padding: 10px;">About</a>
    <a href="#" style="color: white; padding: 10px;">Contact</a>
</nav>
        

Expected Result:

Observe: The links (<a>) are inline, so they sit next to each other. The <nav> is block, so it takes full width.

Task 6: Challenge - Product Card (15 points)

Create a product card combining everything you've learned:

Requirements:

• Outer <div> container with border
• <h2> for product name
• <p> for description
• <span> to highlight price in red and make it large
• <strong> for "In Stock" text
• <div> for a button-like section

Sample Output:

1. What happens when you put two <div> elements next to each other?
2. What happens when you put two <span> elements next to each other?
3. Can you set width and height on inline elements?
4. Do block elements respect top/bottom margins?
5. Name 3 block elements and 3 inline elements.
6. When would you use <div> instead of <span>?
7. Can you put a block element inside an inline element? Should you?