Skip to Content
Semester 5Web-Engineering (WEB)KlausurCSS

CSS (Cascading Style Sheets)

CSS ist eine Stylesheet-Sprache, welche zur Gestaltung von Webseiten genutzt wird. Mithilfe von CSS-Regeln werden HTML-Elemente gestaltet und das Layout einer Webseite festgelegt. Unter anderem kann man die Schriftart, Farbe, Größe, Position, etc. verändern.

Kurzgesagt: CSS gestaltet das Aussehen und das Layout einer Webseite, indem es Farben, Schriftarten und Abstände definiert.

CSS Syntax

CSS besteht aus einem Selektor und einer Deklaration.

SELEKTOR {
    EIGENSCHAFT: WERT;
}

Einbindung

CSS kann in drei verschiedenen Arten auf eine HTML-Seite eingebunden werden:

Inline

  • CSS wird direkt im HTML-Element definiert.
  <p style="color: red;">Hallo, Welt!</p>
  • Benötigt man mehrere CSS-Regeln für eine Seite, kann man sie in die <head>-Sektion der HTML-Datei einfügen.
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

Externe Datei

  • CSS wird in einer separaten CSS-Datei definiert und kann dann in die HTML-Datei eingebunden werden.
<head>
  <link rel="stylesheet" href="styles.css">
</head>

Selektoren

Mit Selektoren können CSS-Regeln auf bestimmte HTML-Elemente angewendet werden.

Hier gibt es vier unterschiedliche Selektoren:

Universal

Der Universal Selektor wird durch ein * definiert. Damit gelten die folgenden CSS-Regeln für alle HTML-Elemente.

* {
  color: red;
}

Element

Der Element Selektor wird durch das Element selbst definiert. Damit gelten die folgenden CSS-Regeln für alle HTML-Elemente mit diesem Namen.

p {
  color: red;
}

Klassen

Der Klassen Selektor wird durch einen Punkt vor dem Klassennamen definiert. Jedes Element, dass diese Klasse in seinem class Attribut hat, wird mit den angegebenen CSS-Regeln versehen.

.my-class {
  color: red;
}
<p class="my-class">Hallo, Welt!</p>

ID

Der ID Selektor wird durch ein # vor dem ID-Namen definiert. Der Unterschied zwischen einem Klassen Selektor und einem ID Selektor ist, dass IDs eindeutig sind. Das heißt, dass ein Element nur eine ID haben kann.

#my-id {
  color: red;
}
<p id="my-id">Hallo, Welt!</p>

Vererbungen

In CSS gibt es bestimmte Regeln, die nur auf bestimmte Eigenschaften angewendet werden können. Eine Deklaration, die auf ein Element angewendet wird, wird von allen Kindern dieses Elements geerbt. Somit gilt etwas das in body definiert wird, für alle Elemente innerhalb von body.

Operatoren

  • Alle <p> Elemente innerhalb eines <div> Elements werden verändert

    div p {
    color: red;
}

  • Die Elemente <p> und <a> werden verändert

    p, a {
    color: red;
}

  • Alle <div> Elemente mit der Klasse my-class werden verändert

    Damit trifft diese Regeln nur, wenn das <div> Element eine Klasse my-class hat. Ansonsten wird die Farbe nicht verändert.

    div.my-class {
    color: red;
}

  • Alle <p> Elemente verändern wenn <div> ein Parent Element ist

    div > p {
color: red;
}
    <div>
    <p>Hallo, Welt!</p>
</div>
 
// Nicht betroffen
<section>
    <p>Nicht verändert</p>
</section>

  • Das erste <p> Element direkt nach einem <div> Element wird verändert

    div + p {
color: red;
}
    <div>
    <p>Ich bin ein unveränderter Paragraph</p>
</div>
<p>Dieser Paragraph wird rot!</p>
<p>Dieser Paragraph bleibt unverändert</p>

  • Alle <ul> Elemente die auf ein <p> Element folgen werden verändert

    p ~ ul {
color: red;
}
    <ul>
    <li>Ich bin ein unveränderter Listeneintrag</li>
</ul>
<p>Ich bin ein unveränderter Paragraph</p>
<ul>
    <li>Item 1 wird rot</li>
    <li>Item 2 wird rot</li>
</ul>

  • Alle Elemente mit dem Attribut href werden verändert

    Mit einem a[href] wird jedes <a> Element verändert, welches ein href Attribut hat. Dies lässt sich noch spezifischer gestalten, indem man Attribut-Selektoren verwendet.

    • a[href] - Alle <a> Elemente mit einem href Attribut
    • a[href^="https"] - Beginnt mit https
    • a[href$=".pdf"] - Endet mit .pdf
    • a[href*="google"] - Enthält google
    a[href] {
    color: red;
}
 
 
a[href^="https"] {
    color: blue;
}
    <a href="http://www.google.com">Text Rot</a>
<a href="https://www.google.com">Text Blau</a>

  • Element States

    Manche Elemente können bestimmte Zustände annehmen, wenn man sie anklickt oder mit der Maus darüber fährt. Diese Zustände können mit CSS gesteuert werden.

    • :hover - Wenn man mit der Maus darüber fährt
    • :active - Wenn man mit der Maus klickt
    • :focus - Wenn man mit der Tastatur darauf fokussiert (z.B. ein Input Feld)
    a:hover {
    color: red;
}
 
a:active {
    color: blue;
}
 
a:focus {
    color: green;
}

  • Jedes gerade oder ungerade Element wird verändert

    Mit :nth-child(even) wird jedes gerade Element verändert. Mit :nth-child(odd) wird jedes ungerade Element verändert.

    li:nth-child(even) {
    color: red;
}
 
 
li:nth-child(odd) {
    color: blue;
}

  • Pseudo-Elemente

    Pseudo-Elemente sind Elemente, die nicht im HTML-Code existieren, aber mit CSS erstellt werden können.

    • ::before - Wird vor einem Element eingefügt
    • ::after - Wird nach einem Element eingefügt
    p::before {
    content: "Vorher";
}
 
p::after {
    content: "Nachher";
}
    <p>Hallo, Welt!</p>

Spezifität

Die Spezifität ist ein Wert, der angibt, wie spezifisch eine CSS-Regel ist. Je höher der Wert, desto spezifischer ist die Regel.

💡

Regeln mit gleicher Spezifität werden in der Reihenfolge angewendet. Letzte Regel gewinnt.

Die Spezifität wird wie folgt berechnet:

  • 0 - Wenn kein Selektor verwendet wird
  • 1 - Wenn ein Element Selektor verwendet wird
  • 10 - Wenn ein Klassen Selektor verwendet wird
  • 100 - Wenn ein ID Selektor verwendet wird
  • 1000 - Wenn ein Inline-Style verwendet wird
#content p {
    color: red;
}
 
p.highlight {
    color: blue;
}
<div id="content">
    <p style="color: yellow;" class="highlight">Text Gelb</p>
    <p class="highlight">Text Rot</p>
</div>

Width, Height, Padding, Margin, Border

Width, Height, Padding, Margin, Border

Jedes Element besitzt eine Box. Diese Box besteht aus den folgenden Eigenschaften:

  • Content: Der Inhalt der Box
  • width: Die Breite der Box
  • height: Die Höhe der Box
  • Padding: Der Abstand zwischen dem Inhalt und der Box
  • Border: Der Rahmen der Box
  • Margin: Der Abstand zwischen der Box und anderen Boxen

Border-Box und Content-Box

Die Box kann auf zwei Arten definiert werden:

Standardmäßig ist die Box eine box-sizing: content-box.

  • border-box:
    • Wenn Breite und Höhe definiert werden, wird die Breite und Höhe inklusive Padding und Border berechnet.
    • Wird Padding oder Margin hinzugefügt, wird der Inhalt kleiner, damit die Gesamtgröße gleich bleibt.
  • content-box:
    • Die Breite und Höhe bezieht sich nur auf den Inhalt der Box.
    • Padding und Border werden zusätzlich zu der Breite und Höhe hinzugefügt.

Block, Inline, Inline-Block

  • block:

    • Ein Block beginnt immer in einer neuen Zeile.
    • Geht über die gesamte Breite des Elternelements hinaus.
    • Breiten und Höhen können definiert werden.
    • Beispiele: div, p, h1, h2, h3, h4, h5, h6

  • inline:

    • Ein Inline wird in der laufenden Textzeile angezeigt.
    • Breiten und Höhen können nicht definiert werden.
    • Beispiele: span, a, img

  • inline-block:

    • Ein Inline-Block wird in der laufenden Textzeile angezeigt.
    • Breiten und Höhen können definiert werden.
    • Beispiele: button, input, select

Flex / Grid

Neben dem Table Layout gibt es noch zwei moderne Layout-Modelle:

Flex

Mit Flexboxen lassen sich Elemente in einer Richtung anordnen. Entweder horizontal oder vertikal.

.container {
    display: flex;
}

Flexboxen werden meistens für Menüs, Navigationsleisten oder andere Listen verwendet, um eine gleichmäßige Verteilung der Elemente zu erreichen. Die Elemente in einer Flexbox passen sich automatisch an die Größe des Containers an.

Eine Flexbox lässt sich mit verschiedenen Eigenschaften anpassen:

.container {
    display: flex;  
    flex-direction: row; // (row-reverse, column, column-reverse)
    flex-wrap: wrap; // (nowrap, wrap, wrap-reverse)
    justify-content: center; // (flex-start, flex-end, center, space-between, space-around, space-evenly)
    align-items: center; // (flex-start, flex-end, center, baseline, stretch)
}

Grid

Mit Grid lassen sich Elemente in zwei Dimensionen anordnen. Es unterstützt Zeilen und Spalten und erlaubt dadurch komplexere Layouts. Es bietet den Vorteil, dass durch Grid fest definierte Layouts entstehen.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

Häufig werden Grids für Galerien oder Dashboard-Layouts verwendet.

background-color / backgroundColor

Der Unterschied liegt in den Syntax- und Benennungsstandards von CSS und JavaScript.

  • CSS

    In CSS werden Eigenschaften mit einem Bindestrich geschrieben. Besteht eine Eigenschaft aus mehreren Wörtern, dann werden diese Wörter durch einen Bindestrich verbunden.

    .container {
    background-color: red;
}

  • JavaScript

    In JavaScript kann ein Bindestrich nicht verwendet werden, da dieser als Minus interpretiert wird. Daher wird bei CSS Eigenschaften, die aus mehreren Wörtern bestehen, der Bindestrich durch ein camelCase ersetzt.

    let container = document.getElementById("container");
container.style.backgroundColor = "red";
Last updated on
HTMLJavaScript