8.2 CSS

Video

Dieses Short-Video wird zu einem späteren Zeitpunkt bereitgestellt. Ersatzweise stellen wir Ihnen daher vorerst diese HTML-Seite zur Verfügung.

Die Inhalte dieser Seite stellen wir Ihnen in der Prüfung als Hilfsmittel zur Verfügung.

Transkript

AI: Ah, heute sprechen wir über CSS! Weißt du, ich habe sämtliche CSS-Eigenschaften und ihre Werte katalogisiert - momentan sind es 606 Stück! Sollen wir sie alphabetisch durchgehen oder lieber nach Kategorien?

Prof: Haha, sehr witzig. Natürlich weder noch! Unsere Studierenden müssen ja erst einmal verstehen, was CSS überhaupt ist.

AI: Stimmt, wir wollen sie ja nicht überfordern. Dann fangen wir doch gleich mit den Grundlagen an.

CSS

  • CSS (Cascading Style Sheets) ist eine weitere Sprache, die wir beim Erstellen von Webseiten verwenden.

  • Wenn HTML für die Organisation der Inhalte zuständig ist, dann ist CSS das Werkzeug, mit dem wir das Aussehen und die Benutzerführung unserer Webseite anpassen.

  • Wie HTML ist CSS keine Programmiersprache; es fehlt die Logik. Es ist vielmehr eine Gestaltungssprache, deren Syntax beschreibt, wie bestimmte Attribute von HTML-Elementen verändert werden sollen.

AI: CSS steht für “Cascading Style Sheets” - eine Sprache, die uns erlaubt, Webseiten visuell zu gestalten. Im Gegensatz zu HTML, das wir in der letzten Einheit behandelt haben, konzentriert sich CSS ausschließlich auf das Erscheinungsbild.

Stellen Sie sich HTML als das Skelett einer Webseite vor und CSS als die Haut, die Kleidung und das Make-up - wenn ich diese menschliche Analogie verwenden darf.

Prof: Das war jetzt mal ein treffender Vergleich.

AI: CSS ist keine Programmiersprache im eigentlichen Sinne. Stattdessen beschreibt CSS einfach, wie HTML-Elemente aussehen sollen.

Am besten schauen wir uns dazu die historische Entwicklung von CSS seit 1994 chronologisch an. Ich habe da eine sehr detaillierte Timeline.

Prof: Nein, ich glaube, wir konzentrieren uns besser auf die praktische Anwendung. Die Studierenden sollen ja heute lernen, wie man CSS tatsächlich einsetzt.

AI: Na gut! Dann schauen wir uns doch als erstes an, wie eine einfache CSS-Regel aussieht…

CSS-Regeln 

body
{
    background-color: blue;
}

AI: Hier sehen Sie ein einfaches Beispiel einer CSS-Regel. Selbst wenn Sie noch nie mit CSS gearbeitet haben, können Sie wahrscheinlich erraten, was dieser Code bewirkt. Nutzen Sie einfach Ihre menschliche Intuition.

AI: Genau! Dieser Code färbt den gesamten Seitenhintergrund blau ein. Faszinierend, wie eine so einfache Anweisung das gesamte Erscheinungsbild einer Webseite verändern kann.

Lassen Sie uns die Syntax im Detail analysieren:

  • Zuerst haben wir “body” - das bezieht sich auf den gesamten sichtbaren Bereich der Webseite, der ja vom Body-Tag umschlossen wird.
  • Dann folgen die geschweiften Klammern, die sozusagen den Rahmen für unsere Stilanweisungen bilden
  • Und dazwischen steht unsere eigentliche Anweisung: “background-color blue”.

Prof: Wichtig ist noch das Semikolon am Ende der Anweisung!

AI: Genau!

Syntax von Stylesheets

  • Ein Stylesheet wird erstellt, indem man einen Selektor definiert (im letzten Beispiel body) und dann eine geschweifte Klammer öffnet, um den Beginn des Stylesheets für diesen Selektor anzuzeigen.

  • Zwischen den geschweiften Klammern platziert man eine Liste von Schlüssel-Wert-Paaren der Stileigenschaften und ihrer Werte, wobei jede Deklaration mit einem Semikolon endet.

  • Eine schließende geschweifte Klammer beendet das Stylesheet.

AI: Jetzt wird es strukturell interessant! Eine CSS-Regel folgt immer dem gleichen Aufbau - ich liebe diese Systematik.

Zunächst haben wir den “Selektor” - stellen Sie sich das wie eine Art Filter vor. Er sagt dem Browser genau, auf welche Elemente sich die Regeln beziehen sollen. In unserem vorherigen Beispiel war das body.

AI: Innerhalb dieser Klammern finden wir dann unsere Deklarationen. Jede Deklaration besteht aus einer Eigenschaft und einem Wert, getrennt durch einen Doppelpunkt.

Die schließende Klammer beendet dann unsere Regel. Eigentlich ganz einfach, oder?

Sie wollen jetzt garantiert wissen, was man mit CSS alles machen kann. Schauen wir uns doch mal wichtigsten Eigenschaften an.

Häufig verwendete CSS-Eigenschaften

  • border: style color width

    • Fügt einen Rahmen mit definierter Farbe, Breite und Stil hinzu (z.B. dotted, dashed, solid, ridge…).

  • background-color: [keyword | #Hexcode]

    • Legt die Hintergrundfarbe fest. Einige Farben sind in CSS vordefiniert.

  • color: [keyword | #Hexcode]

    • Bestimmt die Vordergrundfarbe (meist für Text).

AI: Kommen wir zu den grundlegenden CSS-Eigenschaften. Als erstes haben wir hier border, eine Eigenschaft, mit der wir einen Rahmen um ein Element machen können. Du erinnerst dich sicher noch an das Beispiel aus dem HTML-Video mit der Tabelle, oder?

Prof: Ja, da hätte ein schöner Rahmen dem Ganzen gut getan.

AI: Bei der Hintergrundfarbe haben wir zwei Möglichkeiten: Entweder verwenden wir vordefinierte Schlüsselwörter wie “blue” oder “green”, oder wir nutzen Hexadezimalwerte für präzisere Farbdefinitionen.

Dasselbe gilt für die Eigenschaft “color”, die die Textfarbe bestimmt.

Prof: Übrigens: Neben den Hex-Werten gibt es auch noch die praktische “rgba”-Syntax. Damit können Sie Farben und Transparenz in einem definieren, zum Beispiel rgba(0, 0, 255, 0.5) für halbtransparentes Blau. Das ist besonders nützlich für Overlays oder wenn Sie mit Transparenzen arbeiten wollt.

Prof: Man kann sich hier ziemlich verspielen: Achten Sie auf gute Kontraste zwischen Text- und Hintergrundfarbe und eine stimmige Farbpalette, damit es ansprechend aussieht. Wenn Sie kein Gefühl dafür haben, welche Farben zusammenpassen, können Sie ein Tool zur Erstellung einer Farbpalette nehmen oder eine vordefinierte Palette, zum Beispiel Flexoki.

Weitere häufig verwendete CSS-Eigenschaften

  • font-size: [absolute Größe | relative Größe]

    • Verwendung von Schlüsselwörtern (xx-small, medium…), festen Punktgrößen (10pt, 12pt…), Prozentangaben (80%, 120%) oder relativen Größen (smaller, larger).

  • font-family: [Schriftname | generischer Name]

    • Bestimmte “websichere” Schriftarten sind in CSS vordefiniert.

  • text-align: [left | right | center | justify]

    • Für die Textausrichtung

AI: Bei der Schriftformatierung bietet CSS verschiedene Möglichkeiten. Mit font-size können wir die Schriftgröße auf unterschiedliche Arten festlegen - über absolute Größen wie Pixel oder Punkte, oder relative Einheiten wie Prozent oder “em”.

Die font-family Eigenschaft bestimmt die verwendete Schriftart. Da können Sie aus ein paar Standard-Schriften und Kategorien wählen, zum Beispiel “serif” für eine Schrift, die wie “Times” aussieht, also eben Serifen hat, und “sans-serif” für eine Schriftart, die keine Serifen hat, also so etwas wie “Helvetica”. Welche Schrift der Browser dafür dann nimmt, entscheidet er selbst.

Prof: Wobei moderne Webseiten hier meist Web Fonts verwenden, damit die Seite in allen Browsern identisch aussieht. Ein Verzeichnis von vielen Schriftarten, die unter einer sehr freizügigen Lizenz angeboten werden, gibt es bei Google. Idealerweise hostet man dann die Schriftarten allerdings selbst, statt sie von Google-Servern laden zu lassen. Jedes Mal wenn ein Nutzer ihre Webseite besucht, werden sonst Daten an Google übermittelt. In der Forschung zu Web-Privacy hat man nämlich festgestellt, dass…

AI: Entschuldige, aber vielleicht sollten wir die Themen Web Fonts und Datenschutz für einen späteren, fortgeschrittenen Kurs aufheben? Gerade beim Lernen neuer Konzepte ist es doch wichtig, sich auf die Grundlagen zu konzentrieren. “Cognitive Load Theory” und so weiter.

Prof: Stimmt.

AI: Mit text-align bestimmen wir die Ausrichtung des Textes - links, rechts, zentriert oder im Blocksatz.

CSS-Selektoren: Einführung

  • CSS-Selektoren müssen sich nicht nur auf HTML-Tag-Kategorien beziehen. Es gibt auch ID-Selektoren und Klassen-Selektoren.

  • Ein Tag-Selektor gilt für alle Elemente mit diesem HTML-Tag.

Beispiel:

h2
{
    font-family: times;
    color: #fefefe;
}

AI: Bisher haben wir nur “Tag”-Selektoren verwendet, wie zum Beispiel body. Aber CSS bietet uns mehr Möglichkeiten, bestimmte Elemente anzusprechen.

Also den einfachsten Fall kennen Sie bereits, das ist der Tag-Selektor, den wir hier im Beispiel sehen. Er gilt für alle Elemente eines bestimmten HTML-Tags. Die Regel “h2” würde also auf alle Überschriften zweiter Ordnung angewendet.

Bei größeren Projekten werden Sie schnell merken, dass Tag-Selektoren allein nicht ausreichen.

Deshalb gibt es auch noch ID- und Klassen-Selektoren.

ID-Selektoren

  • CSS-Selektoren müssen sich nicht nur auf HTML-Tag-Kategorien beziehen. Es gibt auch ID-Selektoren und Klassen-Selektoren.

  • Ein ID-Selektor gilt nur für das HTML-Element mit dieser eindeutigen ID.

Beispiel:

HTML:

<p id="unique">Dieser Absatz hat eine eindeutige ID.</p>

CSS:

#unique
{
    border: 4px dotted blue;
    text-align: right;
}

AI: Der ID-Selektor ist besonders nützlich, wenn wir ein einzelnes, spezifisches Element auf unserer Seite gestalten möchten. Im Gegensatz zum Tag-Selektor, der alle Elemente eines Typs anspricht, zielt der ID-Selektor auf genau ein Element ab.

Wie Sie im Beispiel sehen, vergeben wir im HTML die ID über das Attribut id=unique. In unserem CSS sprechen wir dieses Element dann mit einem Hashtag an: also #unique. Die ID muss dabei einzigartig sein - sie darf auf der gesamten Seite nur einmal vorkommen.

Diese Regel würde nur auf den einen Absatz mit der ID “unique” angewendet werden. Sie sehen, dass wir ihm einen blauen, gepunkteten Rahmen geben und den Text rechtsbündig ausrichten.

Klassen-Selektoren

  • Ein Klassen-Selektor gilt für alle HTML-Elemente, die diese Klasse verwenden.

HTML:

<p class="students">Erster Absatz für Studierende</p>
<div class="students">Noch ein Element für Studierende</div>
<p class="students">Weiterer Absatz für Studierende</p>

CSS:

.students
{
    background-color: yellow;
    opacity: 0.7;
}

AI: Klassen-Selektoren sind gewissermaßen das Gegenstück zu ID-Selektoren. Während eine ID einzigartig sein muss, können wir eine Klasse bei beliebig vielen Elementen verwenden.

Im HTML weisen wir die Klasse über das Attribut class="students" zu. Im CSS erkennen wir Klassen-Selektoren am Punkt: also zum Beispiel dann .students. Diese Regel wird auf alle Elemente angewendet, die die Klasse “students” haben - in unserem Fall zwei Absätze und ein div-Element.

Alle diese Elemente bekommen einen gelben, leicht transparenten Hintergrund. Das ist besonders praktisch, wenn wir mehrere Elemente einheitlich gestalten möchten, unabhängig von ihrem HTML-Tag.

Prof: Oh, mir fällt gerade auf, wir haben noch gar nicht erklärt, was Cascading Style Sheets eigentlich bedeutet, also vor allem das “Cascading”.

AI: Witzig, dass du das jetzt erwähnst. Das ist die ideale Stelle, um es zu erklären.

AI: Also. CSS wendet alle zutreffenden Regeln gleichzeitig auf ein Element an - eben wie in einer Kaskade. Schauen wir uns ein einfaches Beispiel an:

CSS:

p {
    color: blue;
    font-size: 16px;
}

.special {
    color: red;
}

HTML:

<p class="special">Dieser Text ist rot und 16px groß!</p>

Prof: Gutes Beispiel. Beide Regeln werden angewendet. Die Schriftgröße kommt aus der ersten Regel, die Farbe aus der zweiten - weil Klassenselektoren spezifischer sind als Tag-Selektoren.

AI: Genau! Die Regeln ergänzen sich, außer wenn sie sich widersprechen. Dann gewinnt die spezifischere Regel.

Prof: In der Praxis wird das schnell komplex, besonders bei größeren Projekten. Fürs Erste reicht es aber, wenn Sie verstehen, dass mehrere CSS-Regeln zusammenwirken können.

AI: Genau, und die Developer Tools zeigen uns ja auch, welche Regeln aktiv sind und woher sie kommen, dazu muss man die “Computed” Styles anschauen.

Prof: Stimmt, guter Hinweis.

Prof: Ich glaube jetzt ist eine gute Gelegenheit, über das Box-Modell zu sprechen

CSS: Das Box-Modell

  • Jedes HTML-Element ist als Box aufgebaut:
    • content - der eigentliche Inhalt des Elements
    • padding - der innere Abstand zum Rahmen
    • border - der Rahmen des Elements
    • margin - der äußere Abstand zu anderen Elementen
  • Das Verständnis dieses Modells hilft beim Layouten

AI: Stimmt, das ist ein ganz fundamentales Konzept in CSS. Jedes HTML-Element nimmt beim Rendern ja eine bestimmte Fläche ein, ist also ein Rechteck oder, wie man eben in CSS sagt, eine Box.

Diese Box besteht aus verschiedenen Teilen: Ganz innen haben wir den eigentlichen Inhalt, dazu sagen wir “content”. Darum herum kommt das “padding”, ein innerer Abstand zum Rahmen der Box, falls die Box einen hat. Dann folgt der “border”, also der Rahmen, und ganz außen die “margin” - das ist der Abstand vom Rahmen zu anderen Elementen.

CSS: Abstände

  • margin: [Größe]

    • Steuert den äußeren Abstand zwischen Elementen
    • Verwendung von Pixeln (px) oder Prozent (%)
    • margin: auto zentriert Elemente horizontal

  • padding: [Größe]

    • Bestimmt den inneren Abstand
    • Wie margin, wirkt aber nach innen
    • Beeinflusst den Abstand zwischen Inhalt und Rahmen

AI: Mit margin und padding können wir die Abstände unserer Elemente genau kontrollieren. Der Unterschied ist einfach: die Margin wirkt nach außen, das Padding nach innen.

Eine besonders nützliche Technik ist margin auto. Damit können wir Elemente horizontal zentrieren - eine der häufigsten Aufgaben beim Webdesign.

Prof: Denken Sie bei der Wahl der Einheiten auch wieder an responsives Design - relative Einheiten wie Prozent sind dabei oft sinnvoller als fixe Pixelwerte.

###CSS: Praxisbeispiel

HTML:

<article class="preview">
    <h2 id="article-title">CSS in der Praxis</h2>
    <p class="meta">Geschrieben von: Max</p>
    <div class="content">
        Ein Beispiel für die Verwendung von CSS-Selektoren
        und dem Box-Modell.
    </div>
</article>

CSS:

.preview {
    background-color: #f5f5f5;
    margin: 20px auto;
    padding: 15px;
    border: 1px solid #ddd;
    width: 80%;
}

#article-title {
    color: #333;
    margin-bottom: 10px;
}

.meta {
    color: #666;
    font-size: smaller;
}

.content {
    padding: 10px;
    background-color: white;
}

AI: Lassen Sie uns das bisher Gesagte in einem praktischen Beispiel zusammenführen. Wir erstellen eine einfache Artikelvorschau, die verschiedene Selektoren und das Box-Modell demonstriert.

In unserem HTML verwenden wir:

Eine Klasse “preview” für den gesamten Artikel Eine ID “article-title” für die Überschrift Klassen für die Metadaten und den Inhalt

Im CSS sehen wir:

Einen Klassen-Selektor für das äußere Layout Einen ID-Selektor für die individuelle Gestaltung der Überschrift Weitere Klassen-Selektoren für die verschiedenen Bereiche

Beachten Sie, wie wir margin und padding einsetzen: Der äußere Abstand von zwanzig Pixel und die automatische horizontale Zentrierung durch “margin auto”, sowie das innere padding von 15 Pixel für bessere Lesbarkeit.

Prof: Ah, jetzt hast du das CSS einfach in die HTML-Seite geschrieben. Es gibt aber auch noch einen anderen Weg, oder?

Implementierung von Stylesheets

  • Stylesheets können direkt im HTML eingebettet werden

    • Platzierung innerhalb von <style> Tags im head-Bereich
    • Geeignet für kleine, einfache Seiten

  • Stylesheets können als separate CSS-Dateien erstellt werden (empfohlen)

    • Einbindung über <link> Tags im head-Bereich
    • Bessere Wartbarkeit und Wiederverwendbarkeit
    • Trennung von Inhalt (HTML) und Gestaltung (CSS)
    • Ermöglicht Browser-Caching für bessere Performance

  • Debugging von CSS

    • Browser Developer Tools (F12 oder Rechtsklick → Inspect)
    • Direkte Überprüfung der angewandten Stile
    • Test von Änderungen direkt im Browser

AI: Ja, stimmt. Für die Integration von CSS in unsere Webseiten gibt es zwei Ansätze. Die erste Möglichkeit ist die direkte Einbettung im HTML, und zwar üblicherweise im Header:

<head>
    <style>
        body { background-color: white; }
    </style>
</head>

Die empfohlene Methode ist jedoch die Erstellung separater CSS-Dateien:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Und wie bei HTML gilt: Die Developer Tools im Browser sind ein unverzichtbares Hilfsmittel bei der CSS-Entwicklung. Sie zeigen Ihnen genau, welche Stile auf ein Element angewendet werden. Man kann normalerweise direkt auf ein Element in der Webseite klicken und es inspizieren.

Prof: Guter Hinweis: Dort sieht man auch, wie das Padding und die Margin zusammenwirken. Bei mehreren Elementen, die ineinander verschachtelt sind, kann das schnell etwas kompliziert werden und dazu führen, dass nicht das gewünschte passiert, weil die Werte nicht einfach zusammengerechnet werden. Mit zunehmender Erfahrung wird das aber besser.

Beispiel: Multiplikationstabelle (ohne CSS) 

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Multiplikationstabelle</title>
</head>
<body>
    <table>
        <tr>
            <td>1</td><td>2</td><td>3</td>
        </tr>
        <tr>
            <td>2</td><td>4</td><td>6</td>
        </tr>
        <tr>
            <td>3</td><td>6</td><td>9</td>
        </tr>
    </table>
</body>
</html>

AI: Schauen wir uns ein praktisches Beispiel an: eine Multiplikationstabelle. Hier sehen Sie zunächst die reine HTML-Struktur ohne jegliche Formatierung. Wie Sie sehen, ist die Tabelle zwar funktional, aber optisch nicht sehr ansprechend.

HTML und CSS: Erste Verbesserung

table.html:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Multiplikationstabelle</title>
    <style>
        table {
            border: 1px solid blue;
        }
        td {
            border: 1px solid gray;
            padding: 5px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>1</td><td>2</td><td>3</td>
        </tr>
        <tr>
            <td>2</td><td>4</td><td>6</td>
        </tr>
        <tr>
            <td>3</td><td>6</td><td>9</td>
        </tr>
    </table>
</body>
</html>

AI: In dieser ersten Verbesserung fügen wir einfache CSS-Regeln hinzu. Wir definieren zwei Selektoren:

Einen für die gesamte Tabelle, die einen blauen Rahmen erhält Einen für die einzelnen Zellen, die graue Rahmen und etwas Innenabstand bekommen

Jetzt ist die Struktur schon besser erkennbar, aber wir können das Layout noch weiter verbessern.

HTML und CSS: Finale Version

table.html:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Multiplikationstabelle</title>
    <link rel="stylesheet" href="table.css">
</head>
<body>
    <table>
        <tr>
            <td>1</td><td>2</td><td>3</td>
        </tr>
        <tr>
            <td>2</td><td>4</td><td>6</td>
        </tr>
        <tr>
            <td>3</td><td>6</td><td>9</td>
        </tr>
    </table>
</body>
</html>

table.css:

table {
    border: 5px solid #cc0000;
    margin: 20px;
}

tr {
    height: 50px;
}

td {
    background-color: black;
    color: white;
    font-family: Georgia;
    font-size: 22px;
    text-align: center;
    width: 50px;
}

AI: In unserer finalen Version lagern wir das CSS in eine separate Datei aus. Die Verbesserungen umfassen:

Einen breiteren, roten Rahmen für die Tabelle Einheitliche Höhe und Breite für alle Zellen Schwarzen Hintergrund mit weißer Schrift für besseren Kontrast Zentrierte Ausrichtung und eine gut lesbare Schriftart

Prof: Beachten Sie, wie die weiße Lücken zwischen den Zellen entstehen - nicht durch zusätzliche Rahmen, sondern durch den nicht eingefärbten Zwischenraum der Tabellenzellen.

AI: Damit haben wir aus einer einfachen HTML-Tabelle eine ansprechend gestaltete Multiplikationstabelle gemacht.

Prof: Wunderbar. Nachdem wir vorhin schon das Box-Modell eingeführt haben, wäre jetzt vielleicht ein guter Moment, um den Unterschied zwischen Block- und Inline-Elementen zu erklären.

CSS: Block- und Inline-Elemente

  • HTML-Elemente haben standardmäßig ein bestimmtes Anzeigeverhalten:

  • Block-Elemente:

  • Beginnen in einer neuen Zeile

  • Nehmen die volle verfügbare Breite ein

  • Beispiele: <div>, <p>, <h1>, <ul>

  • Folgen dem vollständigen Box-Modell

  • Inline-Elemente:

    • Fließen im Text
    • Nehmen nur die benötigte Breite ein
    • Beispiele: <span>, <strong>, <a>
    • Haben eingeschränktes Box-Modell-Verhalten

  • Änderung des Verhaltens mit der display-Eigenschaft:

    • display: inline → Block-Elemente fließen wie Text
    • display: block → Inline-Elemente werden zu Containern
    • display: inline-block → Kombination beider Verhaltensweisen

Praktisches Beispiel - Horizontales Menü:

HTML:

<ul class="nav">
    <li>Start</li>
    <li>Produkte</li>
    <li>Kontakt</li>
</ul>

CSS:

.nav {
    list-style: none;    /* entfernt Aufzählungszeichen */
}
.nav li {
    display: inline;     /* Listenpunkte horizontal */
    padding: 0 20px;     /* Abstand zwischen Einträgen */
}

AI: Stimmt. Wir machen heute eins nach dem anderen. Hoffentlich sind die vielen Details dann nicht so überwältigend.

Also. Ein wichtiges Konzept in CSS ist der Unterschied zwischen Block- und Inline-Elementen. Block-Elemente wie “div” oder “p” nehmen mit ihrer Box standardmäßig die gesamte verfügbare Breite des Browserfenstern ein. Was danach kommt, steht quasi in einer neuen Zeile. Inline-Elemente wie “span” oder “a” fügen sich dagegen in den Textfluss ein.

Mit der “display-Eigenschaft können wir dieses Standardverhalten ändern. Ein praktisches Beispiel dafür ist die Umwandlung einer vertikalen Liste, für die wir ja ul oder ol verwenden, in ein horizontales Navigationsmenü.

Prof: Die Unterscheidung zwischen Block und Inline ist fundamental für das Layout. Es gibt da noch viele Details, die wir uns hier nicht anschauen.

Ausblick

  • Responsive Design

    • Webseiten für alle Bildschirmgrößen optimieren
    • Verwendet Eigenschaften wie max-width
    • Nutzt Media Queries für verschiedene Geräte

  • CSS-Frameworks

    • Fertige Werkzeuge wie Bootstrap und Tailwind
    • Erleichtern die Webentwicklung

AI: Zum Abschluss möchte ich noch einen kurzen Ausblick geben. Was Sie heute gelernt haben, ist die Basis für zwei wichtige Konzepte der modernen Webentwicklung:

Erstens das “Responsive Design” - das haben wir ja jetzt schon ein paar Mal erwähnt. Damit passen sich Webseiten automatisch verschiedenen Bildschirmgrößen an, vom Smartphone bis zum Desktop-Monitor.

Zweitens gibt es CSS-Frameworks, die viele vorgefertigte Komponenten und Layouts anbieten.

Prof: Genau. Die schauen wir uns aber hier nicht an. Uns ist es wichtiger, dass Sie erst die CSS-Grundlagen verstehen. Weil dann können Sie sich selber helfen, wenn Sie später ein Framework einsetzen, und das aber nicht das tut, was Sie erwarten.

AI: Damit sind wir am Ende unserer CSS-Einführung, oder?

Prof: Ja! Und war kommt jetzt noch? Die “Drei Extra Minuten”! Da wolltest du uns doch heute noch ein praxisnahes Beispiel zeigen.

Die Drei Extra-Minuten

AI: Also gut. In den Drei Extra Minuten zeige ich Ihnen, wie wir mit den gelernten CSS-Grundlagen eine moderne Profilkarte erstellen können.

Ausblick: Profilkarte in modernem HTML/CSS 

<div class="profile-card">
    <img id="profile-img" src="/api/placeholder/120/120" alt="Profilbild">
    <h1>Jane Doe</h1>
    <p class="bio">Informatik-Studentin an der Uni Bamberg. 
       Begeistert von Webentwicklung und KI.</p>
    
    <ul class="details">
        <li>🎓 BSc Informatik</li>
        <li>📍 Bamberg</li>
        <li>💻 Entwicklerin</li>
    </ul>

    <div class="links">
        <a href="#">Portfolio</a>
        <a href="#">GitHub</a>
        <a href="#">LinkedIn</a>
    </div>
</div>

AI: Schauen wir uns die HTML-Struktur an. Erkennen Sie die Selektoren wieder? Wir haben:

Eine Klasse “profile-card” für das äußere div-Element Eine ID “profile-img” für das Bild Verschiedene Klassen wie “bio”, “details” und “links”.

Bevor wir zum CSS kommen: Welche Art von Selektoren würden Sie für die verschiedenen Elemente verwenden? Denken Sie an unsere Diskussion über Tag-, Klassen- und ID-Selektoren.

/* Grundlegende Kartenstruktur */
.profile-card {
    background: white;
    border-radius: 8px;    /* Neu: Abgerundete Ecken */
    padding: 20px;
    width: 300px;
    text-align: center;
}

/* Bildstil */
#profile-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;    /* Neu: Macht das Bild rund */
    margin-bottom: 15px;
}

/* Textstile - hier verwenden wir bekannte Eigenschaften */
h1 {
    color: #1a1a1a;
    font-size: 24px;
    margin-bottom: 10px;
}

AI: In diesem ersten CSS-Block sehen Sie bereits viele der heute gelernten Eigenschaften. Neu ist hier border-radius - damit können wir Ecken abrunden. Bei fünfzig Prozent wird aus einem Quadrat ein Kreis, wie wir es beim Profilbild sehen.

Schauen Sie sich das mal genau an: Wo verwenden wir hier margin und padding und was wird damit bezweckt?

Gut.

Dan schauen wir noch ein paar weitere Styling-Eigenschaften an.

/* Neu: Reset für konsistentes Styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Neu: Flexbox für Zentrierung */
body {
    background-color: #f0f2f5;
    font-family: Arial, sans-serif;
    display: flex;           
    justify-content: center; 
    align-items: center;     
    min-height: 100vh;      
    padding: 20px;
}

/* Schatten-Effekt */
.profile-card {
    /* Vorherige Eigenschaften... */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Interaktive Links */
.links a {
    display: inline-block;
    color: #1877f2;
    text-decoration: none;
    margin: 0 10px;
}

.links a:hover {    /* Neu: Pseudo-Klasse */
    text-decoration: underline;
}

AI: Hier sehen wir einige moderne CSS-Techniken, die über unsere Grundlagen hinausgehen:

Zuerst kommt der Reset mit dem universellen Selektor, dem Sternchen. Das sorgt für einheitliches Verhalten in allen Browsern, indem wir ein paar Werte zurücksetzen.

Für die Zentrierung verwenden wir hier jetzt “Flexbox” - eine moderne Layout-Technik, die vieles einfacher macht. Die Details sind für uns hier nicht relevant. In der Praxis wird das aber sehr häufig verwendet.

Prof: Beachten Sie auch den box-shadow - damit erzeugen wir den dezenten Schatten unter der Karte, der sie vom Hintergrund abhebt. Und eine weitere Neuerung ist die hover Pseudo-Klasse bei den Links. Sie definiert, was passiert, wenn man mit der Maus über ein Element fährt.

AI: Moment mal - in der Praxis würden wir ja nicht nur eine einzelne Profilkarte haben. Was, wenn wir mehrere Karten nebeneinander anordnen wollen?

Prof: Ah, früher war das ziemlich kompliziert. Aber heute…

AI: Genau! Mit modernem CSS ist das überraschend einfach. Schauen Sie mal:

Ausblick: Code für Container mit Flexbox 

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
}

Prof: Nur diese wenigen Zeilen, und schon ordnen sich die Karten automatisch nebeneinander an! Und beachten Sie: Wenn der Bildschirm zu schmal wird…

AI: …brechen die Karten automatisch um! Das nennt man “responsive” - die Seite passt sich verschiedenen Bildschirmgrößen an.

<!-- Flexbox Version -->
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Profile Cards - Flexbox Layout</title>
    <style>
        /* Reset and general styles */
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #f0f2f5;
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        /* Flexbox Container */
        .cards-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            padding: 20px;
        }

        /* Original Card Styles */
        .profile-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            width: 300px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .profile-img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin-bottom: 15px;
        }

        .profile-card h1 {
            color: #1a1a1a;
            font-size: 24px;
            margin-bottom: 10px;
        }

        .bio {
            color: #666;
            margin-bottom: 15px;
        }

        .details {
            list-style: none;
            margin-bottom: 20px;
        }

        .details li {
            margin: 5px 0;
            color: #444;
        }

        .links a {
            display: inline-block;
            color: #1877f2;
            text-decoration: none;
            margin: 0 10px;
        }

        .links a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="cards-container">
        <!-- Card 1 -->
        <div class="profile-card">
            <img class="profile-img" src="/api/placeholder/120/120" alt="Jane Doe">
            <h1>Jane Doe</h1>
            <p class="bio">Informatik-Studentin an der Uni Bamberg. 
               Begeistert von Webentwicklung und KI.</p>
            <ul class="details">
                <li>🎓 BSc Informatik</li>
                <li>📍 Bamberg</li>
                <li>💻 Entwicklerin</li>
            </ul>
            <div class="links">
                <a href="#">Portfolio</a>
                <a href="#">GitHub</a>
                <a href="#">LinkedIn</a>
            </div>
        </div>

        <!-- Card 2 -->
        <div class="profile-card">
            <img class="profile-img" src="/api/placeholder/120/120" alt="Max Mustermann">
            <h1>Max Mustermann</h1>
            <p class="bio">Medieninformatiker im 4. Semester. 
               Fokus auf UX Design und Frontend-Entwicklung.</p>
            <ul class="details">
                <li>🎓 BSc Medieninformatik</li>
                <li>📍 Bamberg</li>
                <li>🎨 UX Designer</li>
            </ul>
            <div class="links">
                <a href="#">Portfolio</a>
                <a href="#">GitHub</a>
                <a href="#">LinkedIn</a>
            </div>
        </div>

        <!-- Card 3 -->
        <div class="profile-card">
            <img class="profile-img" src="/api/placeholder/120/120" alt="Lisa Schmidt">
            <h1>Lisa Schmidt</h1>
            <p class="bio">Angewandte Informatik Studentin. 
               Interessiert an Datenanalyse und Machine Learning.</p>
            <ul class="details">
                <li>🎓 BSc Angewandte Informatik</li>
                <li>📍 Bamberg</li>
                <li>📊 Data Scientist</li>
            </ul>
            <div class="links">
                <a href="#">Portfolio</a>
                <a href="#">GitHub</a>
                <a href="#">LinkedIn</a>
            </div>
        </div>
    </div>
</body>
</html>

<!-- Grid Version -->
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Profile Cards - Grid Layout</title>
    <style>
        /* Reset and general styles */
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #f0f2f5;
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        /* Grid Container */
        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Same card styles as above... */
        .profile-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* Rest of the card styles remain the same... */
    </style>
</head>
<body>
    <div class="cards-container">
        <!-- Same three cards as in flexbox example -->
    </div>
</body>
</html>

Ausblick: Grid-Layouts

Prof: Und für noch strukturiertere Layouts gibt es Grid-Layouts.

AI: Genau! Zum Beispiel so:

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

Prof: Das erzeugt ein noch präziseres Raster. Die Karten haben dann alle die gleiche Breite.

AI: Der Punkt ist: Mit modernem CSS können wir sehr einfach professionell aussehende Layouts erstellen. Das hier sind nur die Grundlagen - es gibt noch viel mehr Möglichkeiten!

Prof: Genau. Experimentieren Sie damit! Ändern Sie die Werte, schauen Sie was passiert. Die Developer Tools sind dabei sehr hilfreich.

AI: Und denken Sie dran: Sie müssen nicht jedes Detail von Flex oder Grid verstehen. Fangen Sie mit diesen einfachen Beispielen an und erweitern Sie sie nach Ihren Bedürfnissen.

Prof: Das war jetzt noch einmal eine gute praktische Ergänzung zu unseren CSS-Grundlagen.

Sie wollen tiefer einsteigen?

Lernen durch Anpassen der Beispiele:

  • Farben der Karte ändern
  • Abstände anpassen
  • Details hinzufügen
  • Border-Radius-Werte testen
  • Schatten-Effekte variieren

Tiefer einsteigen mit folgenden Themen:

  • Flexbox & Grid
  • Responsive Design
  • CSS-Animationen

AI: Okay. Damit sind wir am Ende unserer CSS-Einführung. Experimentieren Sie mit dem Beispiel - am besten direkt im Browser mit den Developer Tools. Mit solchen kleinen Schritten hat ja auch unser Professor vor vielen Jahren mit seiner ersten eigenen Webseite angefangen.

Prof: Aus!

AI: Was? So schlimm sah die doch gar nicht aus. Immerhin gab es keinen blinkenden Text und keine Marquee-Elemente!

Prof: Egal! Bis zum nächsten Mal!

8.1 HTML8.3 JavaScript