4. Unterrichtsblock

Inhaltsverzeichnis

Grundlagen
Syntax
Einbindung
Selektoren
Übungsaufgabe

CSS Grundlagen

CSS ist die Sprache, die verwendet wird, um ein HTML-Dokument zu formatieren und zu gestalten.
CSS beschreibt, wie HTML-Elemente dargestellt werden sollen.
CSS steht für Cascading Style Sheets
CSS beschreibt, wie HTML-Elemente auf Bildschirm oder in anderen Medien dargestellt werden sollen
CSS spart viel Arbeit. Es kann das Layout mehrerer Webseiten gleichzeitig steuern
Externe Stylesheets werden in CSS-Dateien gespeichert

body { 
  background-color: lightblue;
}

h1 { 
  color: white;
  text-align: center;
}

p { 
  font-family: verdana;
  font-size: 20px;
}

CSS Syntax

Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock.
Die Deklarationsblöcke werden innerhalb von geschweiften Klammern geschrieben und bestehen aus Eigenschaften, welche einen Wert zugewiesen bekommen.
Ein Selektor kann somit mehrere Deklarationsblöcke enthalten.

/*
Mehrzeiliger 
Kommentar
*/

/* Beispiel */
p {font-size: 15px; color: #333333;}

/* Erklärung */
p {                  /* Selektor (p) und öffnende, geschweifte Klammer */
  font-size: 15px;   /* Deklaration - bestehend aus der Eigenschaft (font-size) und dem Wert (15px) */
  color: #333333;    /* Deklarationen enthalten nach der Eigenschaft einen Doppelpunkt : und am Ende ein Semikolon ; */
}                    /* Schließende, geschweifte Klammer */

Der Selektor zeigt auf das HTML-Element, das formatiert werden soll.
Der Deklarationsblock enthält eine oder mehrere durch Semikolon getrennte Deklarationen.
Jede Deklaration enthält einen CSS-Eigenschaftsnamen und einen Wert, getrennt durch einen Doppelpunkt.
Mehrere CSS-Deklarationen werden durch Semikolons getrennt und Deklarationsblöcke werden von geschweiften Klammern umgeben.

Weiteres Beispiel

In diesem Beispiel werden alle <p>-Elemente zentriert ausgerichtet und rot dargestellt:

p {
  color: red;
  text-align: center;
}

Erklärung

p ist ein Selektor in CSS (er zeigt auf das HTML-Element, das Sie formatieren möchten: <p>).
color ist eine Eigenschaft und red ist der Wert der Eigenschaft
text-align ist eine Eigenschaft und center ist der Eigenschaftswert

Aufgabe

Probiere o.g. Lektionen an einem HTML-Dokument aus, um ein Gefühl hierfür zu bekommen.

CSS Einbindung

Wenn ein Browser ein Stylesheet liest, formatiert er das HTML-Dokument gemäß den Informationen im Stylesheet.

Externes CSS

Mit einem externen Stylesheet kann man das Aussehen einer gesamten Website ändern, indem man nur eine Datei ändert!
Jede HTML-Seite muss einen Verweis auf die externe Stylesheet-Datei innerhalb des <link>-Elements innerhalb des Head-Abschnitts enthalten.

Externe Stile werden innerhalb des <link>-Elements innerhalb des <head>-Abschnitts einer HTML-Seite definiert:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="meinstil.css">
  </head>
  <body>
    <h1>Das ist eine Überschrift</h1>
    <p>Das ist ein Satz.</p>
  </body>
</html>

Das ist eine Überschrift

Das ist ein Satz.

Ein externes Stylesheet kann in jedem Texteditor geschrieben werden und muss mit der Erweiterung .css gespeichert werden.
Die externe .css-Datei sollte keine HTML-Tags enthalten.

So sieht die Datei „meinstil.css“ für o. g. Beispiel aus:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Hinweis: Es darf kein Leerzeichen zwischen dem Eigenschaftswert und der Einheit eingefügt werden:
Falsch (Leerzeichen): margin-left: 20 px;
Richtig (kein Leerzeichen): margin-left: 20px;

Internes CSS

Ein internes Stylesheet kann verwendet werden, wenn eine einzelne HTML-Seite einen einzigartigen Stil hat.
Der interne Stil wird innerhalb des <style>-Elements innerhalb des Head-Abschnitts definiert.

Interne Stile werden innerhalb des <style>-Elements innerhalb des <head>-Abschnitts einer HTML-Seite definiert:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: linen;
      }

      h1 {
        color: maroon;
        margin-left: 40px;
      }
    </style>
  </head>
  <body>
    <h1>Das ist eine Überschrift</h1>
    <p>Das ist ein Satz</p>
  </body>
</html>

Das ist eine Überschrift

Das ist ein Satz

Inline-CSS

Ein Inline-Stil kann verwendet werden, um einen einzigartigen Stil für ein einzelnes Element anzuwenden.
Um Inline-Stile zu verwenden, fügt man dem relevanten Element das style-Attribut hinzu. Das style-Attribut kann eine beliebige CSS-Eigenschaft enthalten.

Inline-Stile werden innerhalb des „style„-Attributs des relevanten Elements definiert:

<!DOCTYPE html>
<html>
  <body>

    <h1 style="color: blue; text-align: center;">Das ist eine Überschrift</h1>
    <p style="color: red;">Das ist ein Satz.</p>

  </body>
</html>

Das ist eine Überschrift

Das ist ein Satz

Tipp: Ein Inline-Style verliert viele der Vorteile eines Stylesheets. Diese Methode sollte daher nur sparsam eingesetzt werden.

Mehrere Stylesheets

Wenn einige Eigenschaften für denselben Selektor (Element) in verschiedenen Stylesheets definiert wurden, wird der Wert aus dem zuletzt gelesenen Stylesheet verwendet.

Angenommen, ein externes Stylesheet hat den folgenden Stil für das Element <h1>:

h1 {
  color: navy;
}

Weiter wird angenommen, dass ein internes Stylesheet ebenfalls einen Stil für das Element <h1> hat:

h1 {
  color: orange;   
}

Wenn der interne Stil nach dem Link zum externen Stylesheet definiert wird, sind die <h1>-Elemente „orange“:

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <style>
    h1 {
      color: orange;
    }
  </style>
</head>

Beispiel

Wenn jedoch der interne Stil vor dem Link zum externen Stylesheet definiert wird, sind die <h1>-Elemente „navy“:

<head>
  <style>
    h1 {
      color: orange;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Kaskadierende Reihenfolge

Welcher Stil wird verwendet, wenn für ein HTML-Element mehr als ein Stil angegeben ist?

Alle Stile auf einer Seite werden nach den folgenden Regeln in ein neues „virtuelles“ Stylesheet „kaskadiert“, wobei Nummer eins die höchste Priorität hat:

Inline-Stil (innerhalb eines HTML-Elements)
Externe und interne Stylesheets (im Head-Bereich)
Browser-Standard

Ein Inline-Stil hat also die höchste Priorität und überschreibt externe und interne Stile und Browser-Standardwerte.

Aufgabe

Probiere o.g. Lektionen an einem HTML-Dokument aus, um ein Gefühl hierfür zu bekommen.

CSS-Selektoren

Ein CSS-Selektor wählt die HTML-Elemente aus, die formatiert werden sollen.

Man kann CSS-Selektoren in fünf Kategorien einteilen:

Einfache Selektoren (wählt Elemente basierend auf Name, ID, Klasse aus)
- Alle der hier folgenden Selektoren sind Teil der einfachen Selektoren
Kombinator-Selektoren (Wählt Elemente basierend auf einer bestimmten Beziehung zwischen ihnen aus)
Pseudo-Klassen-Selektoren (Wählt Elemente basierend auf einem bestimmten Zustand aus)
Pseudo-Element-Selektoren (Wählt und formatiert einen Teil eines Elements)
Attributselektoren (Wählt Elemente basierend auf einem Attribut oder Attributwert aus)

Das CSS-Element Selektor (einfacher Selektor)

Der Elementselektor wählt HTML-Elemente basierend auf dem Elementnamen aus.

Hier werden alle <p>-Elemente auf der Seite zentriert ausgerichtet, mit einer roten Textfarbe:

p {
  text-align: center;
  color: red;
}

Der CSS-ID-Selektor (einfacher Selektor)

Der id-Selektor verwendet das id-Attribut eines HTML-Elements, um ein bestimmtes Element auszuwählen.
Die ID eines Elements ist innerhalb einer Seite einzigartig, daher wird der ID-Selektor verwendet, um ein einzelnes Element auszuwählen!

Um ein Element mit einer bestimmten ID auszuwählen, schreibt man ein Rautezeichen (#), gefolgt von der ID des Elements.

Die folgende CSS-Regel wird auf das HTML-Element mit id="newsletter" angewendet:

#newsletter {
  text-align: center;
  color: red;
}

Hinweis: Ein ID-Name darf nicht mit einer Zahl beginnen!

Der CSS-Klassen Selektor (einfacher Selektor)

Der Klassenselektor wählt HTML-Elemente mit einem bestimmten Klassenattribut aus.
Um Elemente mit einer bestimmten Klasse auszuwählen, schreibt man einen Punkt (.) gefolgt vom Klassennamen.

In diesem Beispiel werden alle HTML-Elemente mit class="mittig" rot und zentriert ausgerichtet:

.mittig {
  text-align: center;
  color: red;
}

Man kann auch angeben, dass nur bestimmte HTML-Elemente von einer Klasse betroffen sein sollen. In diesem Beispiel sind nur <p>-Elemente mit class="mittig" rot und zentriert:

p.mittig {
  text-align: center;
  color: red;
}

HTML-Elemente können auch auf mehr als eine Klasse verweisen. In diesem Beispiel wird das Element <p> entsprechend class="mittig" und class="vollbreite" gestaltet:

<p class="mittig vollbreite">Dieser Satz referenziert zwei Klassen.</p>

Hinweis: Ein Klassenname darf nicht mit einer Zahl beginnen!

Der CSS-Universalselektor (einfacher Selektor)

Der Universalselektor (*) selektiert alle HTML-Elemente auf der Seite. Die folgende CSS-Regel wirkt sich auf jedes HTML-Element auf der Seite aus:

* {
  text-align: center;
  color: blue;
}

Der CSS-Gruppierungsselektor (einfacher Selektor)

Für einen Gruppierungsselektor wählt man alle HTML-Elemente mit denselben Stildefinitionen aus und weist der gesamten Gruppe diesen Stil zu.

/*
Als Beispiel dient folgender Code
Die Elemente h1, h2 und p haben dieselben Stildefinitionen.
*/

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

/*
Stattdessen kann man sparsamer schreiben.
Um Selektoren zu gruppieren, trennt man jeden Selektor durch ein Komma.
*/

h1, h2, p {
  text-align: center;
  color: red;
}

Aufgabe

Probiere o.g. Lektionen an einem HTML-Dokument aus, um ein Gefühl hierfür zu bekommen.

Übungsaufgabe

Absatz

1. Aufgabe

Absatz

Lösungen: Link