Zum Hauptinhalt springen

CSS - Grundlagen

CSS steht für Cascading Style Sheets (gestufte Gestaltungsbögen) Während HTML die Struktur einer Webseite beschreibt, also welche Texte Überschriften sind, wo Listen stehen und was verlinkt ist, kümmert sich CSS um das Aussehen: Farben, Schriften, Abstände und das Layout.

Beide Sprachen ergänzen sich und werden in der Regel als getrennte Dateien geschrieben. Über einen <link>-Tag im <head> der HTML-Datei wird die CSS Datei, z.B.: style.css eingebunden:

<head>
    <link rel="stylesheet" href="style.css">  <!-- CSS einbinden -->
</head>

HTML ist für die Struktur zuständig: Was ist eine Überschrift? Wo beginnt ein Absatz? Wo liegt ein Link?

CSS ist für das Design zuständig: Welche Farbe hat die Schrift? Wie groß sind die Abstände? Wie ist die Seite aufgeteilt?

Aufbau einer CSS-Regel​

Eine CSS-Regel besteht immer aus drei Teilen: dem Selektor, der bestimmt, wen die Regel trifft, sowie aus einer oder mehreren Eigenschaft-Wert-Paaren in geschweiften Klammern.

Selektor {
    Eigenschaft: Wert;
}

Im folgenden Beispiel trifft die Regel alle <h1>-Elemente und legt Schriftgröße, Farbe und eine untere Linie fest:

h1 {
    font-size: 2.2rem;                 /* Schriftgröße */
    color: #0d3b66;                    /* Schriftfarbe */
    border-bottom: 3px solid #4a90d9;  /* Rahmen nur unten */
}

Einheiten​

Es gibt im CSS verschiedene Einheiten. Die beiden wichtigsten (px und rem) wurde obigen bereits verwendet.

EinheitBeschreibung
pxAbsolute Einheit: Ein Pixel entspricht in etwa einem Bildpunkt auf dem Monitor (genauer: 1/96 Inch)
Beispiel: font-size: 16px
remRelative Einheit: Bezieht sich auf die Schriftgröße des Wurzelelements (<html>)
Beispiel: Gilt für <html> font-size: 16px und ein Selektor hat font-size: 2.5em, so ist die Schrift dort 40px.
CSS bietet noch deutlich mehr Einheiten

Farben​

In CSS lassen sich Farben über Farbschlüsselwörter (z. B. red, gold) oder präziser per RGB-Modus definieren, bei dem Rot-, Grün- und Blauanteile von 0 bis 255 gemischt werden, etwa rgb(255, 165, 0) für Orange.

Ein wichtiger Standard sind Hex-Codes (z. B. #FFA500). Sie beginnen mit einer Raute, gefolgt von sechs Zeichen (0–9 und A–F). Jeweils zwei Zeichen stehen dabei für den Rot-, Grün- und Blauanteil. Dank des Hexadezimalsystems (Basis 16) lassen sich so über 16 Millionen Farben kompakt darstellen.

Rahmen​

Mit CSS-Rahmen (Borders) werden Elementen Konturen gegeben. Ein Rahmen besteht immer aus drei Grundeigenschaften: Breite, Stil und Farbe (z. B. border: 2px solid black;). Während solid eine durchgezogene Linie erzeugt, gibt es auch Stile wie dashed (gestrichelt) oder dotted (gepunktet).

Besonders flexibel wird man mit Teilrahmen. Anstatt das gesamte Element zu umranden, werden gezielt einzelne Seiten ansprechen (oben, unten, links, rechts):

  • border-top, border-bottom, border-left, border-right

Außerdem können die Ecken auch abgerundet werden. Entweder alle zusammen (z.B. border-radius: 5px;) oder jede Ecke einzeln:

  • border-top-left-radius, border-top-right-radius,
  • border-bottom-left-radius, border-bottom-right-radius

So lassen sich gezielte Akzente setzen, wie zum Beispiel eine farbige Markierung nur an der linken Seite eines Infokastens.

Sonstige Eigenschaften​

EigenschaftBeschreibung
background-color: #f4e3b1;
line-height: 1.8;em???
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css"> <!-- CSS einbinden -->
    <title>Wie funktioniert das Internet?</title>
</head>

<!-- Sichtbarer Inhalt der Webseite -->
<body>
    <h1>Das Internet erklärt</h1>
    <p>Das Internet ist kein einzelner Computer, sondern ein weltweites <strong>Netzwerk aus Millionen von Computern</strong>, die alle miteinander verbunden sind.</p>
</body>
</html>