CSS: Aussehen

1. CSS-Regeln

CSS schreibst du in eine eigene Datei, styles.css. So bleibt der Inhalt in index.html und die Gestaltung in styles.css.

• Webseite: Lege styles.css neben index.html an und binde sie im <head> ein: <link rel="stylesheet" href="styles.css">.
• Shower: Die Vorlage hat schon eine styles.css. Deine Regeln gehören ans Ende, unter den Kommentar »Eigene CSS-Regeln«.

Eine CSS-Regel sieht so aus:

<h2>Mein Thema</h2>
<p>Mein <em>Lieblingstier</em> ist der Axolotl.</p>
<p class="hinweis">Ein Hinweis in Grau und etwas kleiner.</p>

em {
    color: #75507b;
    font-weight: bold;
}

.hinweis {
    color: #666666;
    font-size: 80%;
}

• Vor der geschweiften Klammer steht der Selektor: welche Elemente gemeint sind. em meint alle Elemente <em>, .hinweis alle Elemente mit class="hinweis".
• Zwischen { und } stehen Eigenschaften mit ihrem Wert, getrennt durch einen Doppelpunkt und beendet mit einem Semikolon.

Zum Ausprobieren: style

Für einen schnellen Versuch kannst du CSS auch direkt an ein Element schreiben, im Attribut style:

<p style="color: #4b86c2;">Dieser Absatz ist blau.</p>

Das ist praktisch zum Ausprobieren. Soll dieselbe Gestaltung an mehreren Stellen gelten, ist eine Klasse in styles.css besser: Dann änderst du sie an einer Stelle für alle.

2. Selektoren

Der Selektor bestimmt, wofür eine Regel gilt:

Ein Element kann mehrere Klassen haben, durch Leerzeichen getrennt: class="hinweis wichtig". Klassennamen schreibst du am besten klein und ohne Umlaute.

3. Farben

Zwei Eigenschaften brauchst du ständig:

• color färbt den Text,
• background färbt den Hintergrund.

<h2>Ein Kasten mit Farbe</h2>
<div class="merke">
    <strong>Merke:</strong> Mit <code>background</code> färbst du den
    Hintergrund, mit <code>color</code> den Text.
</div>

.merke {
    background: #f3e5f5;
    color: #3b2540;
    padding: 20px;
}

Farben gibst du mit Namen (red, white), als Farbcode (#75507b) oder mit Rot-, Grün- und Blauanteil an (rgb(117, 80, 123)). Wie das geht, mit einem Farbmischer zum Ausprobieren, steht unter Farben angeben.

4. Schrift

<h2>Merksatz</h2>
<p class="gross">Eine Folie unterstützt den Vortrag, sie ersetzt ihn nicht.</p>
<p class="klein">Quelle: eigene Erfahrung</p>

.gross {
    font-size: 48px;
    line-height: 1.15;
    font-weight: bold;
}

.klein {
    font-size: 70%;
    color: #666666;
    text-align: right;
}

• font-size ist die Schriftgröße: in Pixeln (48px) oder im Verhältnis zur Umgebung (70%).
• line-height ist der Zeilenabstand, als Vielfaches der Schriftgröße. Große Schrift verträgt einen kleineren Wert.
• font-weight: bold macht fett, font-style: italic kursiv.
• text-align richtet Text aus: left, center, right oder justify (Blocksatz).

Die Schriftart

font-family wählt die Schriftart. Weil nicht jeder Rechner jede Schrift hat, nennst du zum Schluss eine allgemeine Familie, die immer geht:

body {
    font-family: Georgia, serif;
}

serif ist eine Schrift mit kleinen Endstrichen wie in Büchern, sans-serif eine ohne, monospace eine, in der alle Zeichen gleich breit sind, wie im Code. Nimm höchstens zwei Schriftarten: eine für Überschriften, eine für den Text.

Eine eigene Schriftart

Eine besondere Schrift muss als Datei in deinem Projekt liegen; sonst fehlt sie auf jedem anderen Rechner und ganz ohne Internet. So holst du sie dir:

1. Such dir auf fonts.google.com eine Schrift aus, zum Beispiel »Atkinson Hyperlegible«.
2. Such sie auf gwfh.mranftl.com und wähle die Schnitte, die du brauchst, etwa regular und 700 (fett).
3. Lade die ZIP-Datei herunter und lege die .woff2-Dateien in einen Ordner fonts in deinem Projekt.
4. Kopiere den CSS-Code, den die Seite anzeigt, an den Anfang deiner styles.css. Er sieht so aus:

@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-weight: 400;
    font-display: swap;
    src: url('fonts/atkinson-hyperlegible-v12-latin-regular.woff2') format('woff2');
}

Danach verwendest du den Namen wie jede andere Schrift: font-family: 'Atkinson Hyperlegible', sans-serif;. Erscheint sie nicht, prüfe den Pfad in url(…): Liegt die Datei in fonts/, muss der Pfad mit fonts/ beginnen.

5. Abstände, Rahmen und Schatten

Jedes Element ist ein Kasten. Um seinen Inhalt herum liegen, von innen nach außen:

• padding, der Abstand innen, zwischen Inhalt und Rand,
• border, der Rahmen,
• margin, der Abstand außen, zu den Nachbarn.

<h2>Eine Infokarte</h2>
<div class="karte">
    <strong>Tipp:</strong> Abstände, Rahmen und Schatten machen aus
    einem div eine Karte.
</div>

.karte {
    max-width: 520px;
    margin-top: 30px;
    padding: 24px;
    border: 3px solid #4b86c2;
    border-radius: 16px;
    background: #e8f1fb;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

• padding: 24px gilt für alle vier Seiten; padding: 10px 24px heißt 10 oben und unten, 24 links und rechts.
• border: 3px solid #4b86c2 ist ein 3 Pixel breiter, durchgezogener Rahmen in Blau.
• border-radius: 16px rundet die Ecken; 50% macht aus einem Quadrat einen Kreis.
• box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2): 0 Pixel nach rechts, 6 nach unten, 16 Pixel weich, in Schwarz mit 20 % Deckkraft.

6. Bildgröße und Zuschnitt

Ohne Angabe ist ein Bild so groß wie die Datei, oft viel zu groß. Gib ihm eine Höhe oder eine Breite; die andere Seite passt sich an, damit nichts verzerrt:

<img src="pictures/fuji.jpg" alt="Der Fuji" style="height: 300px;">

max-width: 100% sorgt außerdem dafür, dass ein Bild nie breiter wird als der Platz, den es hat. Auf Webseiten ist das eine gute Regel für alle Bilder: img { max-width: 100%; }. In der Shower-Vorlage steht sie schon.

Breite und Höhe zugleich

Gibst du beides an und es passt nicht zum Bild, wird es verzerrt:

<img src="pictures/fuji.jpg" alt="Der Fuji" style="width: 220px; height: 300px;">

Mit object-fit: cover füllt das Bild den Rahmen, ohne sich zu verzerren; was übersteht, wird abgeschnitten. object-position wählt, welcher Teil zu sehen bleibt: der erste Wert waagerecht (0 % links, 100 % rechts), der zweite senkrecht.

<img src="pictures/fuji.jpg" alt="Der Fuji"
    style="width: 220px; height: 300px; object-fit: cover; object-position: 70% 50%;">

Ein festes Seitenverhältnis

Sollen mehrere Bilder gleich geformt sein, gib ihnen eine Höhe und ein Seitenverhältnis mit aspect-ratio; object-fit: cover schneidet sie passend zu:

<img class="quadrat" src="pictures/fuji.jpg" alt="Der Fuji">
<img class="quadrat" src="pictures/sky.jpg" alt="Wolken am Himmel">
<img class="quadrat" src="pictures/monkey.jpg" alt="Ein Affe">

.quadrat {
    height: 200px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
}

Häufige Verhältnisse sind 1 / 1 (quadratisch), 4 / 3, 3 / 4 (hochkant) und 16 / 9 (breit wie ein Bildschirm).

7. Wenn eine Regel nicht wirkt

Prüfe der Reihe nach:

1. Hast du styles.css gespeichert und die Vorschau neu geladen?
2. Ist styles.css im <head> eingebunden (bei der Shower-Vorlage schon erledigt)?
3. Stimmt der Selektor? Ein Punkt vor Klassen (.hinweis), keiner vor Tags (p); die Klasse heißt im HTML genauso.
4. Hat jede Eigenschaft ihren Doppelpunkt und ihr Semikolon, jede Regel ihre schließende }? Ein Fehler kann alle Regeln danach unwirksam machen. VS Code unterstreicht ihn rot.

Die genauere Regel gewinnt

Gelten zwei Regeln für dasselbe Element, gewinnt die genauere. Bei Folien stolpert man darüber oft, weil das Shower-Theme schon Regeln für Überschriften mitbringt (.slide h2). Diese Regel wirkt auf einer Webseite, auf einer Folie aber nicht:

<h2 class="wichtig">Farben ändern</h2>
<p class="wichtig">Ein wichtiger Absatz.</p>

.wichtig {
    color: #c4373a;
}

Schalte das Bild auf Folie um: Der Absatz ist rot, die Überschrift nicht. .slide h2 nennt eine Klasse und einen Tag, .wichtig nur eine Klasse, also gewinnt das Theme. Schreib den Tag-Namen dazu, dann ist deine Regel genauso genau, und weil styles.css nach dem Theme kommt, gewinnt sie:

<h2 class="wichtig">Farben ändern</h2>
<p class="wichtig">Ein wichtiger Absatz.</p>

h2.wichtig,
p.wichtig {
    color: #c4373a;
}