top of page
CSS Style Web Design Example:
</>Html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cake And Cake</title>

<style>
    body {
        margin: 0;
        font-family: Georgia, serif;
        background-color: #dcdcdc;
        color: #000;
    }

    .container {
        width: 90%;
        max-width: 1000px;
        margin: auto;
        padding: 20px;
    }

    header h1 {
        color: purple;
        font-size: 28px;
        margin-bottom: 0;
    }

    header p {
        color: #c97cc9;
        font-style: italic;
        margin-top: 5px;
    }

    h2 {
        margin-top: 30px;
        font-size: 18px;
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 10px;
        margin-bottom: 30px;
    }

    .gallery img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-radius: 5px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .ingredients {
        margin-top: 20px;
    }

    .ingredients h3 {
        margin-bottom: 10px;
    }

    .ingredients ul {
        padding-left: 20px;
        line-height: 1.6;
    }

    @media (max-width: 768px) {
        .gallery {
            grid-template-columns: 1fr;
        }
    }
</style>
</head>

<body>

<div class="container">

    <header>
        <h1>Cake And Cake</h1>
        <p>Mrs. Leung's Cake Shop</p>
    </header>

    <h2>Black Forest Cake</h2>
    <div class="gallery">
        <img src="images/blackforest1.jpg" alt="Black Forest Cake 1">
        <img src="images/blackforest2.jpg" alt="Black Forest Cake 2">
        <img src="images/blackforest3.jpg" alt="Black Forest Cake 3">
    </div>

    <h2>Mango Cake</h2>
    <div class="gallery">
        <img src="images/mango1.jpg" alt="Mango Cake 1">
        <img src="images/mango2.jpg" alt="Mango Cake 2">
        <img src="images/mango3.jpg" alt="Mango Cake 3">
    </div>

    <div class="ingredients">
        <h3>Ingredients for Chocolate Cake Layers:</h3>
        <ul>
            <li>9 large eggs, room temperature</li>
            <li>1 cup granulated sugar</li>
            <li>1 cup all-purpose flour (measured correctly)</li>
            <li>1/2 cup unsweetened cocoa powder</li>
            <li>4 Tbsp (1/4 cup) unsalted butter, melted and cooled</li>
        </ul>
    </div>

</div>

</body>
</html>

  • Padding: Inside the border, background color fills this space.

  • Margin: Outside the border, separates the element from others. 

Margin
Border
Padding
A media query is a CSS feature that lets you apply styles only when certain conditions are true.
Example:

(Screen size is max-width: 768px)

It means:

If the screen width is 768 pixels or less, apply the styles inside.

So it activates on:

  • Tablets

  • Large phones

  • Smaller screens

Screenshot 2025-12-11 at 8.02.24 AM.png

  • 3 columns

  • Each gets 1 equal fraction

  • So each column gets ⅓ of the available space

Gap
Gap
1fr
1fr
1fr
bottom of page