Styling Boxes

Assign your boxes a fixed size, and they’ll obediently scoot to the left. But with the magical incantation of margin: auto, you can summon them to center or glide to the right. Nobody wants text sprawling across a screen like a rogue spell. This technique conjures a balanced, harmonious layout that even critical sorcerers applaud.

div {
    max-width: 1200px;
    margin: 0 auto;
    height: 80vh;
}

The container has a fixed width of 1200px. Using margin: 0 auto;, it is centered horizontally with no space at the top and bottom. Additionally, it occupies 80% of the browser window’s height.

With CSS gradients, you can create smooth transitions between colors, making backgrounds as magical as they are beautiful. Linear or radial, they add depth and charm to your designs. Use Online-Generators to craft and adjust them effortlessly—it’s as easy as a flick of your wand!

.box {
    background: linear-gradient(to right, #ff7e5f, #feb47b);
}

This spell creates a gradient from left to right, starting with warm pink and fading into soft orange, like a sunrise melting into a peachy glow.

With the CSS property border-radius, you can soften sharp edges into smooth, rounded corners, giving your boxes an elegant, polished look. Whether slightly rounded or fully circular, this simple tweak can make your elements shine with style.

.box {
    border-radius: 1rem;
}

Use border-radius to round corners your way. You can round opposite corners, like this: border-radius: 1rem 0;, or give each corner its own curve, like this: border-radius: 8px 5px 0 25px;.

CSS background images bring depth and visual appeal to your designs. They add stunning effects and can be used in countless ways to make your website come alive with creativity.

.box {
    background-image: url('bild.jpg');
}

background-image: sets a background for your container.