LU01.A01 - CSS Grundlagen

Aufgabe 1: Grundlagen

Ausgangslage

Sie haben die Grundlagen gelesen.

Aufgabenstellung

  1. Beschreiben Sie den Unterschied zwischen Block- und Inline-Elementen in HTML und geben Sie jeweils ein Beispiel für ein Block-Element und ein Inline-Element an.
  2. Ändern Sie das Anzeigeverhalten eines Elements mit der CSS-Eigenschaft „display“ von „block“ auf „inline“ und umgekehrt. Erläutern Sie, wie sich das Layout des Elements ändert.

Rahmenbedingungen

Was Beschreibung
Produkt: -
Zeit: 10 Min.
Sozialform: Einzel- oder Partnerarbeit
Arbeitsmittel: Unterrichtsunterlagen, HTML-Editor, Browser

Aufgabe 2: Anwendung

Ausgangslage

Sie haben die Grundlagen gelesen.

Aufgabenstellung

  1. Erstellen Sie die Dokumente `index.html` und `style.css`.
  2. Kopieren Sie die folgende Vorlage in Ihre Dokumente:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="container">
        <div class="logo">Item 1</div>
        <div class="nav">
            <div class="nav-item">Item 1</div>
            <div class="nav-item">Item 2</div>
            <div class="nav-item">Item 3</div>
        </div>
    </div>
</body>
</html>
  3. Verlinken Sie das `syle.css` in Ihrem HTML-Dokument.
  4. Gestalten Sie Ihr HTML-Dokument gemäss Vorgabe.

Rahmenbedingungen

Was Beschreibung
Produkt: HTML-Seite mit CSS Flexbox
Zeit: 15 Min.
Sozialform: Einzel- oder Partnerarbeit
Arbeitsmittel: Unterrichtsunterlagen, HTML-Editor, Browser