Zum Hauptinhalt springen

CSS - Grundlagen

CSSSelektorenfontbordermarginpadding

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:

/* Typselektor h1-Überschriften. */
h1 {
    font-size: 2.2rem;                 /* Schriftgröße */
    color: #8e2d2d;                    /* Schriftfarbe */
    border-bottom: 3px solid #d08383;  /* Rahmen nur unten */
}

Das Beispiel zeigt, dass CSS-Werte verschiedene Typen haben können: Bei font-size ist es eine Längenangabe (rem oder px), bei color ein Farbwert (#0d3b66). Manche Eigenschaften wie border-bottom erwarten sogar einen zusammengesetzten Wert aus mehreren Angaben: Breite, Linienart und Farbe.

Bevor die Typen weiter unten genauer erklärt werden, probiere gerne verschiedene Werte im Live-Editor aus.

/* Typselektor h1-Überschriften. */
h1 {
    font-size: 2.2rem;                 /* Schriftgröße */
    color: #ff0000;                    /* Schriftfarbe */
    border-bottom: 3px solid #d08383;  /* Rahmen nur unten */
}
Wie funktioniert das Internet?

Längenangabe​

Es gibt im CSS verschiedene Einheiten. Die beiden wichtigsten (px und rem) wurde oben 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.5rem, so ist die Schrift dort 40px.

Farbwert​

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 (border) 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.

Übersicht der wichtigsten Eigenschaften​

Schrift​

EigenschaftBeschreibung
font-size: 1.2rem;Schriftgröße
font-family: Arial, sans-serif;Schriftart. Mehrere Alternativen werden durch Komma getrennt – der Browser nimmt die erste verfügbare.
font-weight: bold;Schriftstärke: normal, bold oder Zahlen von 100 (dünn) bis 900 (fett)
font-style: italic;Kursiv: normal oder italic

Text​

EigenschaftBeschreibung
color: #333;Textfarbe
text-align: center;Ausrichtung: left, center, right
text-decoration: underline;Dekoration: underline (unterstrichen), line-through (durchgestrichen), none (keins)
line-height: 1.6;Zeilenabstand. Eine Zahl ohne Einheit ist ein Vielfaches der aktuellen Schriftgröße.

Hintergrund​

EigenschaftBeschreibung
background-color: #f4e3b1;Hintergrundfarbe des Elements

Rahmen​

EigenschaftBeschreibung
border: 2px solid #333;Rahmen um das Element (Breite, Stil, Farbe). Stile: solid, dashed, dotted
border-bottom: 3px solid red;Rahmen nur an einer Seite: border-top, border-left, border-right
border-radius: 8px;Abgerundete Ecken

Abstände & Maße​

EigenschaftBeschreibung
width: 300px;Breite des Elements
height: 200px;Höhe des Elements
padding: 16px;Innenabstand – Abstand zwischen Inhalt und Rahmen
margin: 24px;Außenabstand – Abstand zwischen dem Element und seinen Nachbarn
margin: 0 auto;Zentriert ein Block-Element horizontal (links und rechts automatisch)

Das Box-Modell​

Jedes HTML-Element wird im Browser als rechteckige Box dargestellt, das ist die Grundlage des sogenannten Box-Modells. Eine Box besteht aus vier Schichten, von innen nach außen: dem Inhalt, dem inneren Abstand (padding), dem Rahmen (border) und dem äußeren Abstand (margin). Mit padding steuerst du, wie viel Luft zwischen Inhalt und Rahmen liegt, mit margin legst du fest, wie weit die Box von ihren Nachbarn entfernt ist.

Seitenbereich
Element 1 — Inhalt
Element 2 — Inhalt
margin
border
padding
Inhalt
padding: 16px
margin: 20px

CSS - Beispiel​

/* Typselektor für die gesamte Seite. */
body {
    border: 3px solid #3d6791;
    margin: 30px;
    padding: 30px;
}

/* Typselektor <h1>-Überschriften. */
h1 {
    font-size: 2.4rem;
}

/* Typselektor Textabsätze. */
p {
    font-size: 1.1rem;
}
    
strong { 
    color: #0d3b66;
}
Wie funktioniert das Internet?
Training: Verständnisfragen
  • CSS einbinden: Wie wird eine externe CSS-Datei in eine HTML-Seite eingebunden? Schreibe den passenden HTML-Tag auf und erkläre, welche Attribute er benötigt und wohin er im HTML-Dokument gehört.
  • Aufbau einer CSS-Regel: Beschrifte die drei Teile der folgenden CSS-Regel mit den Begriffen Selektor, Eigenschaft und Wert: 
    p {
        color: #333333;
    }
  • Längenangaben berechnen: Das <html>-Element hat font-size: 20px. Ein <h2>-Element hat font-size: 1.5rem. Wie viele Pixel groß ist die Schrift des <h2>?
  • Rahmen gezielt einsetzen: Wie lässt sich mit CSS nur am linken Rand eines Elements eine farbige Linie zeichnen? Schreibe die passende CSS-Eigenschaft auf.
  • Box-Modell: Was ist der Unterschied zwischen margin und padding? Erkläre beide Begriffe mit eigenen Worten. Fertige eine Skizze an.
Training: Webseite mit CSS gestalten

  1. Gestalte die Webseite "Das Internet erklärt " mit CSS. Nutze dabei mindestens:

    • eine eigene Hintergrundfarbe
    • eine andere Schriftart und Schriftgröße für die Überschriften
    • einen Rahmen oder eine farbige Linie bei einer der Überschriften
    • unterschiedliche Textfarben für Überschriften und Fließtext
    • einen Zeilenabstand, der den Text angenehm lesbar macht
    • eine Rahmen mit abgerundeten Ecke für den gesamten Inhalt

  2. [optional] Gestalte die Listeneinträge (<li>) der Webseite so, dass sie wie einzelne Kacheln aussehen. Nutze dabei:

    • padding, damit der Text nicht direkt am Rand klebt
    • margin, um etwas Abstand zwischen den Einträgen zu schaffen
    • border oder border-left, um jeden Eintrag optisch abzugrenzen
    • border-radius, um die Ecken abzurunden
    • eine eigene background-color für die Listeneinträge

    Hinweis: Bei ungeordneten Listen <ul> können die Punkte der Aufzählung deaktiviert werden.

    ul /* Selektor für ungeordnete Listen*/
    {
        list-style-type: none;
    }