3 Vorbereitung zur Arbeit mit CSS

Bevor wir mit CSS-Beispielen und Anwendungen beginnen, ist es wichtig, die nötigen Tools und die Umgebung einzurichten. Dieses Kapitel beschreibt die Software, Browser und Entwicklungswerkzeuge, die für die praktische Anwendung des Playgrounds erforderlich sind. Zudem werden grundlegende HTML-Vorlagen vorgestellt, die als Basis für die CSS-Beispiele dienen.

3.1 Notwendige Software

Webbrowser
Jeder moderne Webbrowser, wie Chrome, Firefox, Safari oder Edge, unterstützt CSS und bietet Entwicklertools zur Analyse und Fehlerbehebung.
Texteditor oder IDE
Ein leistungsfähiger Editor ist entscheidend für das Arbeiten mit HTML und CSS. Empfohlene Optionen sind:
- Visual Studio Code: Kostenlos und verfügt über zahlreiche Erweiterungen.
- WebStorm: Ein professionelles Tool für Webentwicklung, das erweiterte Funktionen für HTML, CSS und JavaScript bietet.
Hinweis: In den folgenden Anweisungen wird Visual Studio Code als Beispiel verwendet, die Anweisungen sind jedoch auf andere Editoren übertragbar.

3.2 Entwicklungswerkzeuge und Browser-Developer-Tools

Moderne Browser bieten Entwicklertools, um HTML und CSS in Echtzeit zu testen und zu verändern. Diese Tools können per Rechtsklick auf die Seite und Auswahl von „Untersuchen“ (in Chrome oder Firefox) oder über die Entwicklermenüs geöffnet werden.

CSS-Analyse und Fehlerbehebung: Überprüfen und testen Sie CSS-Styles, passen Sie diese an und beobachten Sie direkt die Auswirkungen.
Responsives Design testen: Simulation verschiedener Bildschirmgrößen und Layout-Ansichten.

3.3 Einfache Entwicklungsumgebung einrichten

Erstellen Sie einen Ordner für die Projekte, zum Beispiel css-playground.
Innerhalb dieses Ordners erstellen Sie die Dateien für die CSS- und HTML-Beispiele.

3.4 Grundstruktur für HTML- und CSS-Dateien

Alle CSS-Beispiele im Playground sind mit HTML-Beispielen versehen, um die vollständige Funktionsweise zu demonstrieren. Jedes Beispiel setzt die Struktur einer grundlegenden HTML-Datei voraus.

3.4.1 Beispiel: Grundstruktur einer HTML-Datei

Erstellen Sie in Ihrem Projektordner eine Datei mit dem Namen index.html und fügen Sie die folgende HTML-Struktur ein:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Playground</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <header>
        <h1>CSS Playground</h1>
    </header>

    <main>
        <!-- Hier werden die CSS-Beispiele eingefügt -->
    </main>

</body>
</html>

<link rel="stylesheet" href="styles.css"> bindet die Datei styles.css ein, in der die CSS-Beispiele geschrieben werden.
Die <main>-Sektion enthält den Bereich, in dem die CSS-Beispiele getestet werden.

3.4.2 CSS-Datei für Beispiele

Erstellen Sie im selben Ordner eine Datei mit dem Namen styles.css. Dies ist die Datei, in die der CSS-Code aus den Beispielen eingefügt wird. Die Grundstruktur sieht wie folgt aus:

/* styles.css */

/* Grundlegende Stildefinitionen */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
}

header {
    text-align: center;
    padding: 1em;
}

In jedem Kapitel werden CSS-Stile direkt in diese styles.css-Datei eingefügt und über den HTML-Body getestet.

3.5 Die ersten Schritte zum Ausprobieren

HTML-Datei öffnen: Doppelklicken Sie auf die index.html-Datei, um sie im Browser zu öffnen.
Editor verwenden: Arbeiten Sie in styles.css, speichern Sie Änderungen und aktualisieren Sie die index.html-Seite im Browser, um die Änderungen zu sehen.