CSS vergleichen: Der traditionelle Weg vs. W3.CSS

Diese Seite zeigt den Unterschied beim Stylen eines einfachen Elements mit normalem CSS im Vergleich zur Verwendung des W3.CSS-Frameworks.

1. Der traditionelle CSS-Weg (Was ihr bereits kennt)

Um ein einfaches Informationsfeld zu gestalten, schreiben wir normalerweise eigenes CSS:

Wichtige Information (Traditionell)

Dies ist ein Informationsfeld, das mit benutzerdefinierten CSS-Regeln gestaltet wurde. Wir mussten Hintergrundfarbe, Rand, Innenabstand und Textfarbe definieren.

Der HTML-Code dafür sieht so aus:

<div class="custom-info-panel">
    <h3>Wichtige Information (Traditionell)</h3>
    <p>Dies ist ein Informationsfeld, das mit benutzerdefinierten CSS-Regeln gestaltet wurde. Wir mussten Hintergrundfarbe, Rand, Innenabstand und Textfarbe definieren.</p>
</div>

Und der benötigte CSS-Code (im <style>-Tag im <head>):

.custom-info-panel {
    background-color: #e7f3fe;
    border: 1px solid #2196F3;
    padding: 16px;
    margin-top: 10px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.custom-info-panel h3 {
    margin-top: 0;
    color: #2196F3;
}

2. Der W3.CSS-Weg (Eine einfachere Methode)

Mit W3.CSS können wir ein sehr ähnliches Ergebnis erzielen, indem wir vordefinierte Klassen direkt in unserem HTML verwenden. Es ist kein zusätzliches CSS in unserem <style>-Tag für dieses Panel erforderlich!

Wichtige Information (W3.CSS)

Dieses Panel verwendet W3.CSS-Klassen! w3-panel für die Grundstruktur, w3-pale-blue für den Hintergrund, w3-border und w3-border-blue für den Rand und w3-card-4 für einen leichten Schatteneffekt. Die Überschrift verwendet w3-text-blue.

Der HTML-Code dafür (mit W3.CSS-Klassen):

<!-- Wichtig: Stelle sicher, dass W3.CSS im <head> verlinkt ist: -->
<!-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> -->

<div class="w3-panel w3-pale-blue w3-border w3-border-blue w3-card-4">
    <h3 class="w3-text-blue">Wichtige Information (W3.CSS)</h3>
    <p>Dieses Panel verwendet W3.CSS-Klassen! ...</p>
</div>

Vorteile von W3.CSS hier gezeigt:

Weniger Code: Kein benutzerdefiniertes CSS für dieses spezielle Panel erforderlich.
Schnelligkeit: Vordefinierte Klassen schnell anwenden.
Konsistenz: W3.CSS sorgt für ein einheitliches Design.
Responsivität: Viele W3.CSS-Komponenten sind standardmässig responsiv.
Zusätzliche Features: Einfaches Hinzufügen von Effekten wie Schatten (w3-card-4).

Wenn ihr euch die beiden Boxen oben anseht, sehen sie sehr ähnlich aus. Aber für die W3.CSS-Version mussten wir keine zusätzlichen CSS-Regeln schreiben – wir haben einfach die bereits existierenden Klassen aus dem W3.CSS-Framework verwendet.

Das ist die Stärke eines CSS-Frameworks wie W3.CSS: Es vereinfacht und beschleunigt die Webentwicklung.