CSS steht für Cascading Style Sheets (kaskadierte Stil-Seiten). CSS ist nur in Zusammenhang mit HTML sinnvoll. Es bezieht sich auf die in Markierungen in HTML-Dokumenten und weist diesen Markierungen verschiedene Stilinformationen (Farben, Abstände, Alignierungen etc.) zu.

In CSS definiert man eine Reihe von CSS-Regeln. Diese Regeln sind immer gleich aufgebaut. Um CSS zu lernen, muss man also lediglich wissen

  1. wie man eine Regel definiert,
  2. wo man Regeln hinterlegt und
  3. wie mehrere Regeln abgearbeitet werden

Wir beginnen mit dem Aufbau einer Regel.

4.1 CSS-Regeln

Eine CSS-Regel besteht aus zwei Teilen:

  1. Selektor (wo soll etwas gemacht werden?)
  2. Deklarationen (was soll gemacht werden?)

Hier eine Beispielregel:

p {
  color: red;
}

Im obigen Beispiel ist der Selektor p es gibt eine Deklaration, nämlich color: red.

Selektor

Der Selektor p besagt, dass die Regel alle Absätze (Paragraphen) betrifft. Ein Selektor kann ein beliebiges HTML-Element sein, z.B. h1 (alle Überschriften der Ebene 1) oder a (alle Links). Es sind dann immer alle Vorkommen dieser Elmente betroffen.

Deklaration

Die Deklaration color: red besagt, dass die Schriftfarbe color auf rot red gesetzt werden soll.

Eine Regel kann mehrere Deklarationen beinhalten, z.B.

p {
  color: red;
  background-color: yellow;
}

Hier setzen wir im Vergleich zu vorher zusätzlich noch die Hintergrundfarbe auf gelb. Jede Regel besteht aus einer Eigenschaft (hier: color oder background-color) und dem dazugehörigen Wert (red oder yellow). Das Semicolon am Ende dient - wie bei vielen Programmiersprachen - lediglich dazu, die verschiedenen Angaben zu trennen. Man kann also das letzte Semicolon weglassen. Es wird dennoch häufig gesetzt, weil man es sonst gern beim Erweitern um eine weitere Zeile vergisst.

Es steht Ihnen frei, eine Regel so zu setzen wie oben (mit Einrückung und Zeilenumbruch) oder ganz kurz:

p {color:red; background-color:yellow;}

Übersichtlicher und üblich (auch - oder gerade - bei Profis) ist die erstere Variante.

Mit den Deklarationen legen Sie also verschiedenste Eigenschaften fest, so wie Schriftsätze und -farben oder Abstände oder Dimensionen oder Strichstärken von Umrisslinien und vieles mehr.

Beispiele

Hier noch ein paar Beispiele für CSS-Regeln:

h1 {
  font-size: 40px;
  color: blue;
}

h2 {
  font-size: 30px;
  font-style: italic;
}

a {
  background-color: yellow;
}

Unsere Regeln gelten immer für alle Elemente einer Art. Sie können sich vorstellen, dass man auch genauer festlegen möchte, was man stylen will. Man will nur die Links im Navigationsbereich in jener Farbe haben, man möchte nur die Überschriften in einem anderen Bereich größer oder kleiner stellen etc. Wie man genauer selektiert, schauen wir uns im nächsten Abschnitt an.

4.2 Selektoren

4.2.1 Element-Selektor

Was wir bereits kennen, ist der Element-Selektor. Er wählt alle Vorkommen eines bestimmten Elements aus:

h1 {
  font-size: 40px;
  color: blue;
}

Im Beispiel sind alle Überschriften der Ebene 1 betroffen.

4.2.2 ID-Selektor

Möchte man ein einziges, ganz bestimmtes Element einer HTML-Datei auswählen, kann man einen selbst definierten ID verwenden, um dieses Element zu markieren. Diesen ID, ein frei wählbares Wort ohne Leerzeichen, muss man zunächst in dem gewünschten HTML-Element mit dem Attribut id angeben.

Hier markieren wir im HTML-Teil einen Absatz mit dem ID "spezial":

<h1>Titel</h1>

<p id="spezial">
  Lorem ipsum...
</p>

Jetzt kann man in CSS genau dieses Element selektieren. Dazu verwendet man den ID mit vorangestelltem Hash, hier also #spezial:

#spezial {
  color: red;
}

Wichtig ist, dass der ID "spezial" nur ein einziges Mal in der HTML-Datei auftauchen darf!

Aber Sie dürfen natürlich mehrere verschieden IDs definieren, die jeweils genau ein Mal auftauchen:

<h1 id="fettertitel">Titel</h1>

<p id="spezial">
  Lorem ipsum...
</p>

Entsprechend hätten Sie typischerweise zwei Regeln, um diese eine Überschrift und diesen einen Absatz zu stylen:

#fettertitel {
  font-size: 60px;
}

#spezial {
  color: red;
}

4.2.3 Klassen-Selektor

Wenn Sie eine Reihe von Elementen kennzeichnen wollen, verwenden Sie nicht einen ID, sondern eine Klasse. Auch diese können Sie selbst definieren, indem Sie ein Wort ohne Leerzeichen erfinden und damit HTML-Elemente kennzeichnen, diesmal über das Attribut class. Hier definieren wir eine Klasse namens "wichtig".

<h1>Titel</h1>

<p class="wichtig">
  Lorem ipsum...
</p>

<p class="wichtig">
  Lorem ipsum...
</p>

<p class="wichtig">
  Lorem ipsum...
</p>

In CSS selektieren Sie diese Element mit dem Klassenamen plus vorangestelltem Punkt, also wichtig:

.wichtig {
  background-color: yellow;
}

Ein HTML-Element kann mehreren Klassen gleichzeitig angehören. Nehmen wir an, wir haben zwei Klassen definiert:

.wichtig {
  background-color: yellow;
}

.riesig {
  font-size: 46px;
}

Jetzt kann man für jedes Element entscheiden, zu welcher/welchen Klasse/n es gehören soll. Mehrere Klassen werden mit Leerzeichen getrennt.

<h1>Titel</h1>
<p class="wichtig riesig">
  Lorem ipsum...
</p>
<p class="wichtig">
  Lorem ipsum...
</p>
<p class="wichtig">
  Lorem ipsum...
</p>

Klassen und IDs sind extrem wichtige und ständig benötigte Mechanismen in CSS.

4.2.4 Universalselektor

Es gibt noch die Möglichkeit, alle Elemente in einem HTML-Dokument anzusprechen, nämlich den Kleene-Stern, benannt nach dem Mathematiker Stephen Cole Kleene:

* {
  color: blue;
}

Der Universalselektor wird z.B. dazu benutzt, ein Dokument zu normalisieren.

4.3 CSS einbinden

Ihre CSS-Regeln sind nur im Zusammenhang mit einem konkreten HTML-Dokument sinnvoll. Wie hinterlegen Sie die Regeln?

Es gibt drei Möglichkeiten, CSS einzubinden, von denen die dritte die übliche ist:

  1. Im Element (im HTML-Dokument)
  2. Im Kopf (im HTML-Dokument)
  3. Eigene Datei

4.3.1 Im Element (inline)

Wenn Sie "mal eben" ein Styling bei einer Überschrift oder einem Absatz ausprobieren wollen, können Sie das direkt ins Element reinschreiben, man nennt das auch inline:

<h1 style="font-size:50px; color:red">Supertitel</h1>

Sie haben es hier nicht mit einer vollständigen CSS-Regel zu tun, denn offensichtlich müssen Sie hier ja kein Element selektieren. Sie listen also einfach alle Stileigenschaften und Werte auf, die Sie ändern möchten.

Die Methode ist natürlich nicht sehr praktikabel im realen Einsatz: Die Stilinformationen sind übers ganze HTML-Dokument verstreut und würden Sie alle Elemente so stylen, hätten Sie jede Menge "Codeduplizierung" (z.B. Farbe Rot in jeder h1-Überschrift).

Empfehlung

Verwenden Sie Inline-CSS besser nicht, es sei denn, Sie möchten schnell etwas testen. Vergessen Sie nicht, den Inline-Code nach dem Testen wieder zu entfernen.

4.3.2 Im Kopf (head)

Sie können eine Reihe von CSS-Regeln im head des HTML-Dokuments einbinden. Diese Regeln gelten für genau dies eine HTML-Dokument. Die Regeln umgeben Sie mit dem Element style.

<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Eine Webseite</title>
    <style>
      h1 {
        font-size: 40px;
        color: blue;
      }
      h2 {
        font-size: 30px;
        font-style: italic;
      }
      a {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    Hier stehen Inhalte...
  </body>
</html>

Schon besser als die erste Option, aber Webseiten bestehen eigentlich immer aus mehreren HTML-Dokumenten (z.B. für Landing Page, Kontakt, Impressum und sonstigen Unterseiten wie Projekte, Testimonials etc.). Sie möchten nicht Ihr Styling für Überschriften, Links etc. für jede Datei duplizieren, da so leicht Inkonsistenzen entstehen.

Empfehlung

Binden Sie CSS nur in Ausnahmefällen im Kopf einer HTML-Datei ein, z.B. zu Demonstrationszwecken (in einer Schulung) oder zum Testen. Vergessen Sie auch hier nicht, den Code wieder zu entfernen, wenn Sie zur nächsten Möglichkeit des Einbindens (eigene Datei) übergehen.

Der Normalfall ist so: Sie erzeugen eine Datei mit Endung .css, z.B. "style.css", und speichern Sie in einem Unterverzeichnis, das Sie "css" nennen. In diese CSS-Datei schreiben Sie alle ihre Regeln für Ihre Webseiten.

Wenn Ihre HTML-Dateien "index.html" und "kontakt.html" hießen, würde Ihr Verzeichnis so aussehen:

css/style.css
index.html
kontakt.html

Jetzt muss jede Ihrer HTML-Dateien wissen, welche CSS-Datei das jeweilige Styling enthält. Das erreichen Sie, indem Sie in den head jeder HTML-Datei einen Link zur CSS-Datei angeben. Den Link spezifizieren Sie mit dem Element link. Der Pfad kommt dabei ins Attribut href. Außerdem müssen Sie mit rel den Typ "stylesheet" (also eine CSS-Datei) angeben.

Das heißt, der Kopf von "index.html" und "kontakt.html" enthält folgendes:

<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Eine Webseite</title>
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    Hier stehen Inhalte...
  </body>
</html>

Klar ist, dass verschiedene HTML-Datein (index.html und kontakt.html) auf ein und diesselbe CSS-Datei zeigen können.

Umgekehrt kann eine HTML-Datei auch mehrere CSS-Dateien auf die obige Weise einbinden, wenn Sie z.B. Ihre CSS-Regeln der Übersichtlichkeit halber auf mehrere Dateien verteilen möchten (ist allerdings nicht üblich). Schreiben Sie dann einfach mehrere link-Elemente untereinander, die CSS-Dateien werden dann in dieser Reihenfolge eingelesen.

Empfehlung

Es ist mittlerweile Standard, alle CSS-Regeln in CSS-Dateien zu halten. Der große Vorteil: Wenn alle Ihre HTML-Seiten auf dieselbe CSS-Datei zeigen, wirken sich Änderungen im CSS automatisch auf alle HTML-Seiten aus.

Achten Sie darauf, dass Sie Ihre Datei wirklich in ein Unterverzeichnis css legen. In der Regel kommen noch weitere CSS-Dateien hinzu (z.B. für den Druck oder beim Einbinden von externen Stylesheets).

4.4 Basics 1

4.4.1 Kommentare

Kommentare in CSS sehen aus wie Blockkommentare in Java.

/* Absätze */
p {
  font-size: 24px; /* groß */
}

Leider gibt es keinen Zeilenkommentar (wie // in Java).

4.4.2 Farbe und Transparenz

Es gibt folgende Farbeigenschaften:

Der Farbwert kann auf drei verschiedene Arten angegeben werden.

Bezeichner

Es gibt eine Reihe von Bezeichnern von bekannten Farben, z.B. black, white, yellow, red, cyan.

p {
  color: cyan;
}

Bezeichner erlauben es, sehr schnell Farbwerte einzusetzen, und sind bei den zwei eindeutigen Farbangaben black und white üblich. Ansonsten sind Bezeichner häufig zu ungenau für ein professionelle Farbgestaltung.

RGB und Transparenz

Farben können auch über die Funktionen rgb() und rgba() gewählt werden, wo Rot, Grün und Blau als Zahl zwischen 0 und 255 angegeben werden, z.B.

p {
  background-color: rgb(255, 0 , 0); /* rot */
}

Mit rgba() können Sie mit einem vierten Wert, den Alphawert, die Transparenz angeben können. Genauer gesagt geben Sie das Gegenteil von Transparenz an, also die Deckkraft (Opagheit) der Farbe an, zwischen 0 (transparent) und 1 (solide).

p {
  background-color: rgba(255, 0 , 0, 0.5); /* transparent */
}

Die rgb/rgba-Funktionen kommen in der Praxis eher selten zum Einsatz, i.d.R nur wenn Transparenz erwünscht ist.

Hexdezimal

Sie können die drei RGB-Werte auch als eine 6-stellige Hexadezimalzahl (mit einem # vorangestellt) angeben. Im Hexadezimalsystem drücken zwei Stellen genau den Bereich 0 bis 255 aus. Hexadezimal zählt man von 00, 01, 02, ... bis F9, FA, FB, FC, FD, FE, FF.

Die 6-stellige Hexdezimalzahl drückt mit den ersten 2 Stellen den Rotwert, mit den mittleren 2 Stellen den Grünwert und mit den letzten 2 Stellen den Blauwert aus. Man merke sich also "RGB".

Beispiele:

h1 {
  color: #FF0000; /* rot */
}

p {
  background-color: #00FF00; /* grün */
}

Die erste Farbe ist ein reines Rot, die zweite ein reines Grün. Grautöne erkennt man daran, dass R, G und B gleich sind, z.B. #888888 oder #A1A1A1.

Kurzschreibweise: Wenn bei allen drei Farbwerten die zwei Stellen gleich sind, kann man die Farbangabe auf 3 Stellen verkürzen (wird gerne bei Grautönen benutzt):

Die hexadezimale Darstellung ist die am weitesten verbreitete. Die meisten Grafiktools bieten Farbwähler an, die direkt die Hexadezimalzahl mit anzeigen.

4.4.3 Schrift (Font)

Bei der Schrift kann man zunächst mit font-family die Schriftart wählen, z.B. Times New Roman oder Helvetica. Man wählt die Schriftart häufig für den ganzen body:

body {
  font-family: Helvetica;
}

Schrifteigenschaften (Schriftart, -farbe und -größe) werden von allen enthaltenen Elementen geerbt, d.h. alles, was ich in body definiere, gilt für das ganze Dokument, kann aber in Unterelementen (z.B. h1) verändert werden.

Zurück zur Schriftart: Wenn der Name der Schriftart aus mehr als einem Wort besteht, muss man Anführungszeichen verwenden:

body {
  font-family: "Times New Roman";
}

Generische Schriftart

Jetzt kann es sein, dass der Browser die entsprechende Schriftart nicht hat. Dann ist es sicherer, eine generische Schriftart zu verwenden. Davon gibt es drei:

Fallback-Optionen

Man kann auch eine Reihe von Möglichkeiten angeben, durch Komma getrennt. CSS versucht dann die erste Option zu wählen. Wenn die nicht vorhanden ist, die zweite usw. Wir geben also eine Reihe von Fallback-Optionen an:

body {
  font-family: "Times New Roman", Times, serif;
}

Es gibt eine Handvoll üblicher Kombinationen wie der obigen. W3schools hat eine Liste üblicher Web Safe Font Combinations zusammengestellt - unbedingt anschauen!

Schriftgröße

Die Größe der Schrift legt man mit font-size fest:

body {
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
}

Dabei gibt es verschiedene Einheiten:

px (Pixel): wird normalerweise für Monitore verwendet

pt (Punkt): wird für den Printbereich verwendet (wird später relevant)

em: relative Angabe, 1em steht für die Standardgröße im Brower, 0.8em dann für 80% der Standardgröße

%: relativ zur "geerbten" Standardgröße

Eine mögliches Vorgehen ist, im body eine Schriftgröße mit px zu setzen und diese dann mit % in den Unterelementen zu modifizieren:

body {
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
}

h1 {
  font-size: 200%;
}

h2 {
  font-size: 150%;
}

Um die Schrift fett oder kursiv oder beides zu setzen, benutzt man font-weight bzw. font-style.

P {
  font-weight: bold;
  font-style: italic;
}

Textausrichtung

Mit text-align können Sie Ihren Text linksbündig (left), rechtsbündig (right) oder zentriert (center) layouten lassen.

h1 {
  text-align: center;
}

Mit text-align: justify können Sie einen Blocksatz (d.h. Text schließt links und rechts ab) erzwingen:

p {
  text-align: justify;
}

4.5 Selektoren 2

Bislang wissen wir, wie wir auf bestimmte Elementtypen, auf Klassen oder IDs zugreifen.

Häufig möchten wir Elemente z.B. innerhalb des Navigationsbereichs anders stylen als alle anderen Elemente, dazu benötigen wir den Nachfahren-Selektor.

4.5.1 Nachfahren

Wollen wir alle Absätze innerhalb des Navigations-Elements nav blau färben, schreiben wir das so:

nav p {
  color: blue;
}

Links sind normalerweise innerhalb der Absätze. Wollen wir die Links alle fett darstellen, können wir schreiben:

nav p a {
  font-weight: bold;
}

Das bedeutet also: "Alle a innerhalb von einem p innerhalb von einem nav".

Wenn meine Links (a) immer in Absätzen (p) enthalten sind, kann ich hier aber auch faul sein und einfach schreiben: "Alle a innerhalb von einem nav". Konkret:

nav a {
  font-weight: bold;
}

Man sollte die Regeln immer so einfach wie möglich halten, um sein Styling-Ziel zu erreichen. Dass CSS wird auch so schon komplex genug.

4.5.2 Gruppierung

Wenn mehrere Elemente die gleichen Eigenschaften haben sollen, kann man die Regeln gruppieren.

Zum Beispiel:

h1 {
  color: blue;
}

h2 {
  color: blue;
}

p {
  color: blue;
}

Hier kann man schreiben:

h1, h2, p {
  color: blue;
}

Das Komma bedeutet hier also so etwas wie ein logisches ODER.

4.6 Basics 2

4.6.1 Block-Elemente und Inline-Elemente

Man kann sich jedes HTML-Element als Box vorstellen. Dabei gibt es zwei prinzipiell unterschiedliche Arten von Elementen (und damit Boxen): Block-Elemente und Inline-Elemente.

Bei einem Block-Element wie p oder h1 nimmt diese Box die ganze Breite des sichtbaren Bereichs ein, d.h. nach einem Block-Element geht es immer unter dem Element weiter (Zeilenumbruch).

Bei einem Inline-Element wie a, em oder strong haben wir es i.d.R. mit einer schmalen Box zu tun, die über eine Zeile hinaus und in die nächste Zeile hineinlaufen kann. Das Inline-Element selbst verursacht also keinen Zeilenumbruch.

Am einfachsten sehen wir die genauen Maße dieser Boxen, indem wir ihren Hintergrund einfärben. Zum Beispiel wie folgt. Zunächst ein wenig HTML:

<h1 id="b1">Ein Titel</h1>

<p>
  Ein bisschen Text.
  Ein Text <strong id="b2">mit
  Hervorhebung mitten drin</strong>.
  Und noch ein bisschen Text.
  Und noch ein bisschen Text.
</p>

Jetzt die Einfärbung:

#b1 {
  background-color: orange;
}

#b2 {
  background-color: cyan;
}

Wir sehen:

Block und Spanne

Sie sehen den grundsätzlichen Unterschied zwischen dem Block-Element h1 und dem Inline-Element strong.

Sie können übrigens auch ein Block-Element in ein Inline-Element verwandeln (und umgekehrt), und zwar mit der CSS-Eigenschaft display:

h1 {
  display: inline;
}

strong {
  display: block;
}

Mit dieser Eigenschaft können Sie Element auch ausblenden:

h1 {
  display: none;
}

Im nächsten Abschnitt lernen wir zwei generische HTML-Elemente für diese beiden Elementtypen (Block und Inline) kennen.

4.6.2 div und span

Manchmal benötigen Sie einen Container, um einen ganzen Teilbereich Ihrer Seite zu umspannen, damit Sie diesen Teilbereich separat stylen können. Dafür gibt es das generische HTML-Element div (engl. division). Es handelt sich dabei um ein Block-Element und wird i.d.R. für große Teilbereiche verwendet.

Das div hat im Gegensatz zu den anderen Block-Elementen wie h1 oder p keinerlei vorgegebene Bedeutung (das ist mit "generisch" gemeint).

Etwas ähnliches gibt es auch für Inline-Elemente. Hier heißt das generische Element span. Sie können es verwenden, um Ihre eigene Idee einer "Wortmarkierung" zu definieren, ohne dass Sie einen bestehenden Typ wie em oder strong "umwidmen" müssen.

Schauen wir uns wieder ein bisschen HTML an:

<div>
  Ein bisschen Text.
  Ein Text <span>mit
  Hervorhebung mitten drin</span>.
  Und noch ein bisschen Text.
  Und noch ein bisschen Text.
</div>

<div id="spezial">
  Und noch ein Block.
</div>

Wir haben hier keine der üblichen HTML-Elemente genommen, sondern lediglich unsere generischen Container div und span. Ohne weiteres Styling würden wir also nur den Text sehen. Für das Styling beziehen wir uns dann auf die beiden Elementtypen. Da man i.d.R. mehrere Elemente vom Typ div und span hat, setzt man oft zusätzlich IDs oder Klassen ein:

div {
  background-color: orange;
}

span {
  background-color: cyan;
}

#spezial {
  background-color: yellow;
}

Wir sehen:

div und span

4.6.3 Randlinien

Jedes Element, egal ob Block oder Inline-Element, hat einen Rand (engl. border). Für den Rand kann mit border-style jederzeit eine Linie eingeschaltet werden. Wir probieren das mal mit unseren Boxen oben aus:

span {
  background-color: cyan;
  border-style: solid;
}

#spezial {
  background-color: yellow;
  border-style: dotted;
}

Wir sehen:

Begrenzugslinie

Bei Linien kann man als Stil noch solid (die Grundeinstellung) oder dashed (gestrichelt) angeben.

Linienstärke, Farbe, abgerundete Ecken

Außerdem können Sie mit border-width die Linienstärke, mit border-color die Farbe und mit border-radius die Abrundung der Ecken (man gibt den Radius der Abrundung an) bestimmen.

Interessant ist auch, dass Sie nur eine (oder mehr) der vier Seiten mit border-top, border-bottom, border-left und border-right einschalten können. Insbesondere border-bottom wird manchmal als Alternative zum Unterstreichen von Text verwendet.

Hier ein Beispiel:

span {
  background-color: cyan;
  border-bottom: dashed;
  border-width: 1px;
}

#spezial {
  background-color: yellow;
  border-style: solid;
  border-color: black;
  border-width: 2px;
  border-radius: 7px;
}

Wir sehen:

Einstellmöglichkeiten

Kurzschreibweise

Es gibt auch eine Kurzschreibweise um Linienstärke, Stil und Farbe in einem anzugeben. Dazu verwenden Sie einfach border. Hier ein Beispiel:

span {
  background-color: cyan;
  border: 1px solid black;
}

4.6.4 Außenabstand: Margin

In den Beispielen oben sieht alles ein bischen gedrängt aus. Wie verändern wir die Abstände? Zunächst mal wollen wir die untere Box in unserem Beispiel mit Außenabständen versehen. Wir wollen 20px nach oben (engl. top) und 50px nach links (engl. left) Abstand haben. Dass erreichen wir mit margin-top und margin-left.

#spezial {
  background-color: yellow;
  border: 2px solid black;
  margin-top: 20px;
  margin-left: 50px;
}

In unserem Beispiel sieht das so aus:

Außenabstand

Entsprechend gibt es noch margin-bottom und margin-right.

Kurzschreibweisen

Es gibt zwei Kurzschreibweisen, die beide margin verwenden. Ganz kurz geht es mit einem Wert für alle vier Außenabstände (top, right, bottom, left):

#spezial {
  background-color: yellow;
  border: 2px solid black;
  margin: 20px;
}

Es geht aber auch mit zwei Werten, wobei der erste für top/bottom, der zweite für left/right steht:

#spezial {
  background-color: yellow;
  border: 2px solid black;
  margin: 20px 50px;
}

Collapsing Margins

Auch ein Textabsatz ist nichts anderes als eine Box (genauer: ein Block-Element). Wenn wir für Textabsätze folgende Außenabstände (engl. margin) angeben:

p {
  margin-top: 40px;
  margin-bottom: 40px;
}

Wie sieht der Abstand zwichen zwei Absätzen aus? Das kann man mit ein Stückchen HTML testen:

<hr/>
<p>
  Lorem ipsum ...
</p>

<p>
  Lorem ipsum ...
</p>

<p>
  Lorem ipsum ...
</p>
<hr/>

Der Abstand müsste ja 80px sein. Aber sehen Sie selbst:

Collapsing Margins

Der Abstand über dem ersten Absatz ist gleich dem Abstand zwischen zwei Absätzen, also 40px. Dieses Phänomen nennt man Collapsing Margins. Die allgemeine Regel ist, dass zwischen zwei Elementen der größere der beiden Margins genommen wird, nicht die Summe. Dies gilt allerdings nur in Richtung der Höhe, nicht in der Breite.

4.6.5 Innenabstand: Padding

Den Innenabstand geben Sie ganz ähnlich mit padding an:

#spezial {
  background-color: yellow;
  border: 2px solid black;
  padding-top: 20px;
  padding-left: 50px;
}

Wir sehen:

Innenabstand

Natürlich können wir Innen- und Außenabstand kombinieren:

#spezial {
  background-color: yellow;
  border: 2px solid black;
  margin-top: 20px;
  margin-left: 50px;
  padding-top: 20px;
  padding-left: 50px;
}

Dann sieht man:

Innenabstand2

Kurzschreibweisen

Auch hier gibt es die zwei Kurzschreibweisen mit einem Wert:

#spezial {
  background-color: yellow;
  border: 2px solid black;
  padding: 20px;
}

...und mit zwei Werten:

#spezial {
  background-color: yellow;
  border: 2px solid black;
  padding: 20px 50px;
}

4.6.6 Höhe und Breite

Sie können auch die Höhe und Breite einer Box mit den Eigenschaften height und width festlegen. Wir definieren zwei Blöcke wie folgt:

<div id="block1">
  Block eins.
</div>
<div id="block2">
  Und noch ein Block.
</div>

Höhe und Breite kann man entweder absolut festlegen (in Pixel) oder relativ (in Prozent). Die relative Angabe bezieht sich immer auf den umgebenden Container.

#block1 {
  width: 300px;
  height: 100px;

  background-color: orange;
  border: 1px solid black;
}

#block2 {
  width: 50%;

  background-color: yellow;
  border: 1px solid black;
  margin-top: 20px;
}

Sie sehen:

Höhe und Breite

4.6.7 Box-Model

Das sogenannte Box Model fasst die obigen Begriffe von Randlinie, Margin und Padding zusammen:

Box Model

Interessant ist noch, dass bei der Angabe der vier Richtungen immer diese Reihenfolge einzuhalten ist. Merken kann man sich: Oben starten und dann im Uhrzeigersinn weiter:

4.6.8 Normalisieren

Alle Browser (z.B. Firefox oder Chrome) haben ihr eigenes internes CSS-Stylesheet, um Schriftgrößen und Abstände festzulegen. Es ist gute Praxis, alle Abstände auf Null zu setzen, damit der eigene Style überall gleich aussieht.

Dazu verwendet man den Universalselektor:

* {
  margin: 0;
  padding: 0;
}

Was verändert sich dadurch? Zum Beispiel die Abstände zwischen Absätzen oder die Einrückung bei Listen und Aufzählungen.

4.7 Basics 3

4.7.1 Listen

Wie Sie wissen, gibt es zwei Typen von Listen: nicht-nummeriert (unordered ul) und nummeriert (ordered ol). In CSS können Sie den Stil der Listensymbole (Punkt oder Zahl) verändern.

Bei ul können Sie mit list-style-type die Form des "Punkts" verändern, z.B. zu einem Quadrat:

ul {
  list-style-type: square
}

Sie können auch ein eigenes Bild verwenden:

ul {
  list-style-image: url("img/bullet.png");
}

Bei ol können Sie die Nummerierungsart ändern, z.B. zu römisch:

ol {
  list-style-type: upper-roman
}

Ansonsten regulieren Sie die Einrückung z.B. mit margin-left.

Wie Sie wissen, werden Links mit dem Element a (wie anchor) markiert. Bei der Gestaltung von Links haben wir jetzt das "Problem", dass Links unterschiedliche Zustände haben können, die unterschiedlich gestaltet werden können (z.B. werden bereits besuchte Links oft de-akzentuiert). Wir unterscheiden die folgenden Zustände:

  1. noch nie angeklickt (link)
  2. vorher min. einmal angeklickt (visited)
  3. Mauszeiger schwebt über dem Link (hover)
  4. Link wird im Moment angeklickt (active)

Um diese Zustände zu stylen, gibt es Pseudoelemente, das sind vier verschiedene Varianten vom Element a. Die Varianten werden mit : und einem Schlüsselwort ausgezeichnet:

a:link {
    color: blue;
}

a:visited {
    color: grey;
}

a:hover {
    background-color: blue;
  color: white;
}

a:active {
  background-color: red;
  color: white;
}

Tipp: Heutzutage möchte man oft die Unterstreichung von Links entfernen. Das schafft man mit der Eigenschaft text-decoration

a:link {
  text-decoration: none;
}

Alternativ kann man auch den Rand des Elements (border) als Ersatz für die Unterstreichung verwenden. Das hat zwei Vorteile: (1) man kann den Abstand zum Strick einstellen (mit Padding) und (2) man kann auch gestrichelte oder gepunktete Linien wählen:

a:link {
  text-decoration: none;
  border-bottom: dashed 1px blue;
}

4.7.3 Hintergrundbild

Ob man auf Webseiten Hintergrundbilder haben möchte oder nicht, mag stundenlange Stildebatten auslösen. Wir sagen hier kurz, wie's geht.

Prinzipiell kann man ein Bild (Bitmap, z.B. im Format png, jpg oder gif) als Hintergrundbild festlegen, das der Browser als Kachel behandelt. Das heißt, das Bild wird von links nach rechts in Zeile für Zeile über den Hintergrund verteilt. Dazu gibt man im CSS unter body den Pfad zu einem Bild an:

body {
  background-image: url(redpill.png);
}

Das Bild erscheint dann unter den normalen Elementen in gekachelter Form:

gekachelter Hintergrund

Man hat jetzt zwei Einflussgrößen. Man kann erzwingen, dass die Wiederholung nur in x-Richtung stattfindet...

body {
  background-image: url(redpill.png);
  background-repeat: repeat-x;      
}

gekachelter Hintergrund nur in x-Richtung

... oder nur in y-Richtung.

body {
  background-image: url(redpill.png);
  background-repeat: repeat-y;
}

gekachelter Hintergrund nur in y-Richtung

Man kann diese Möglichkeit nutzen, um z.B. einen Farbverlauf am oberen oder am linken Rand hinzubekommen. Dazu verwendet man einen kleinen Streifen mit einem Verlauf und wiederholt ihn nur in x- oder y-Richtung.

4.8 Positionierung

Bislang haben wir nur begrenzt Einfluss auf die Positionierung von Elementen genommen, indem wir z.B. Innen- und Außenabstände verändert haben. Jetzt wollen wir unsere Element relativ zu ihrer ursprünglichen Position verschieben oder ganz aus dem normalen Layoutfluss herausheben.

4.8.1 Bilder einbinden: Textfluss, float

Wir behandeln zunächst die Eigenschaft float, die meistens im Zusammenhang mit Bildern und Text auftritt, aber auch in anderen Zusammenhängen nützlich sein kann.

Bilder einbinden

Ein Bild wird mit dem Element img eingebunden. Ein Bild wird wie ein Wort behandelt, d.h. es wird in der aktuellen Zeile positioniert, die Unterkante liegt auf der Grundlinie des Textes. Das Bild wird auch mit der Zeile umgebrochen, wenn das Fenster z.B. verkleinert wird.

Text und <img src="Bilder/pill.png" alt="Rote Pille"/> Bild.

Das sieht dann so aus:

Bild, normal eingebunden

Zusätzlich können Sie die gewünschte Größe des Bildes mit width und height angeben. Sie müssen nur aufpassen, dass Sie das originale Größenverhältnis beibehalten, sonst wird Ihr Bild verzerrt dargestellt.

Also zum Beispiel:

<img width="200" height="150" src="Bilder/pill.png" alt="Rote Pille"/>

Sie können auch relative Angaben (in Prozent) verwenden. Diese Angabe bezieht sich allerdings auf den umgebenden Container, d.h. hier wird die halbe Bildschirmbreite eingenommen.

<img width="50%" height="50%" src="Bilder/pill.png" alt="Rote Pille"/>

Zurück zur Positionierung: In der Regel will man das Bild aber aus dem Textfluss herauslösen und ganz nach links, rechts oder mittig positionieren. Das macht man mit der CSS-Eigenschaft float. Nehmen wir an, wir hätten unser Bild mit dem ID "mypic" versehen:

#mypic {
  float:left;
}

Wir haben dem Beispiel etwas mehr Text hinzugefügt. Das Bild wird durch die float-Eigenschaft aus dem Fluss herausgelöst und "floatet" nach links:

Bild mit float: left

Auf ähnliche Weise kann man ein Bild rechts anordnen, mit float:right, oder auch in der Mitte mit float: center.

Jetzt kann man noch die Ränder mit margin anpassen.

#mypic {
  float:left;
  margin-right: 20px;
}

Bild mit angepasster Margin

Wird ein Bild "aus dem Fluss" genommen, betrifft das alle folgenden Elemente. Schauen wir uns ein Beispiel mit zwei folgenden Absätzen an:

<img id="mypic" src="Bilder/pill.png" alt="Rote Pille"/>
<p>
  Lorem ipsum ...
</p>

<p>
  Lorem ipsum ...
</p>

Wir wollen nicht immer, dass der zweite auch um das Bild fließt, wie hier:

Bild mit zwei Absätzen

Um das zu verhindern, muss man an der Stelle, die nicht mehr um das Float-Element fließen soll, ein "clear" setzen. Markieren wir also den zweiten Absatz in HTML:

<img id="mypic" src="Bilder/pill.png" alt="Rote Pille"/>
<p>
  Lorem ipsum ...
</p>

<p id="hiernicht">
  Lorem ipsum ...
</p>

Das "clear" ist eine CSS-Eigenschaft, die es in den Geschmacksrichtungen left, right und both gibt. Man muss den Wert wählen, der dem "gefloatetem" Element entspricht:

#hiernicht {
  clear: left;
}

Das erfüllt den Zweck:

Bild mit zwei Absätzen

Wer sicher in die Zukunft gehen möchte, kann auch both nehmen. Dann spielt es keine Rolle, ob das Element "left" oder "right" ist.

4.8.2 position

Die CSS-Eigenschaft position erlaubt sehr dramatische Eingriffe in das Layout. Es gibt vier mögliche Werte:

  1. static
  2. relative
  3. absolute
  4. fixed

Wir nehmen mal die folgende Ausgangslage:

<p>
  Lorem ipsum ...
</p>

<img id="mypic" src="redpill.png" alt="Rote Pille"/>

<p>
  Lorem ipsum ...
</p>

Das sieht dann so aus:

Bild zwischen zwei Absätzen

position: static

Der Wert static ist die Grundeinstellung. Also sieht das dann genau so aus wie oben im Screenshot:

#mypic {
  position: static;
}

position: relative

Bei relative bleibt das Bild im originalen Layout. Jetzt hat man mit den Eigenschaften left, right, top, bottom die Möglichkeit, das Bild relativ zur Ursprungsposition zu verschieben.

#mypic {
  position: relative;
  left: 100px;
  top: 50px;
}

Bitte beachten Sie, dass "left" bedeutet "Abstand nach links zur Orginalposition". Es bedeutet nicht "nach links schieben".

Vergleichen Sie das Bild mit dem ursprünglichen Layout oben. Sie sehen, dass die beiden Absätze den Platz freihalten. Das Bild ist lediglich relativ zur alten Position um 100 Pixel nach rechts und 50 Pixel nach unten verschoben.

Anmerkung: Wenn Sie ein Element auf relative schalten, aber keine Positionsangaben machen, ist alles genauso wie im "Normalfall" mit static.

Beispiel für position:relative

position: absolute

Die Option absolute nimmt das Element aus dem Layout raus, ähnlich wie float. Wichtig ist jetzt: wie wird es positioniert? Es orientiert sich an den Grenzen des umgebenden Containers (genauer gesagt: dem ersten nicht-static Element mit Positionsangaben) und wird dann mit Abständen (left, right, top, bottom) positioniert.

Zum Beispiel so:

#mypic {
  position: absolute;
}

#mypic {
  position: absolute;
  left: 100px;
  top: 0px;
}

Das resultiert in:

Beispiel für position:relative

Beachten Sie auch, dass, wenn Sie bottom verwenden, das Element wirklich ganz unten im Fenster landet.

Tipp: Wenn sich Ihr Element nicht am Elternelement orientiert, schalten Sie das Elternelement auf relative, dann bleibt das Elternelement gleich, aber Ihr absolute funktioniert (Beispiel: rechtsbündig).

position: fixed

Die Option fixed funktioniert exakt so wie absolute mit dem Unterschied, dass das Element beim Scrollen fixiert bleibt.

#mypic {
  position: fixed;
  left: 100px;
  top: 0px;
}

Diese Positionierung wird also bei Elementen verwendet, die man auch als "sticky" bezeichnet: ein fixierter Menübutton ("Hamburger") oder Social-Media-Buttons, aber auch wenn der komplette Header bleiben soll, benutzt man fixed.

Wichtig: Sie dürfen bei positio:fixed nicht vergessen, die Abstandsangaben zu machen, sonst ist unklar, wie der Browser handeln soll und es kommt zu unerwünschten Effekten.

4.8.3 z-Index

Bei den genannten Mechanismen kann es vorkommen, dass zwei Elemente überlappen. Nehmen wir zwei Bilder:

<img id="pic1" src="redpill.png" alt="Rote Pille"/>
<img id="pic2" src="pills.jpg" alt="Zwei Pillen"/>

Die stehen normalerweise nebeneinander:

Zwei Bilder nebeneinander

Aber natürlich kann man die beiden mit relative ineinander verschieben:

#pic1 {
  position: relative;
  left: 20px;
}
#pic2 {
  position: relative;
  right: 20px;
}

Das Element, das später hinzugefügt wird (#pic2), überlappt das erstere (#pic1).

Zweites Bild ist vorn

Aus der 3D-Grafik kennen Sie vielleicht den z-Index. Die z-Achse ist im 3D-Raum die Achse, die aus dem Bild heraus zeigt. Normalerweise liegen alle Bilder in einer Ebene mit z-index = 0. Man kann aber ein Bild explizit auf eine andere Ebene setzen, z.B. das erste Bild auf z-index = 1 setzen:

#pic1 {
  position: relative;
  left: 20px;
  z-index: 1;
}

Schon ist das erste Bild vorn:

Erstes Bild ist vorn

4.8.4 Von Block zu Inline zu unsichtbar

Mit der CSS-Eigenschaft display können Sie Elemente, die normalerweise Block-Elemente sind, zu Inline-Elementen machen. Das ist z.B. nützlich, wenn Sie eine Menü als Liste spezifizieren, aber eigentlich als horizontale Button-Leiste sehen möchten:

<nav>
  <ul>
    <li>Start</li>
    <li>Hauptseite</li>
    <li>Kontakt</li>
  </ul>
</nav>

Im CSS stellen Sie die List-Items einfach von Block auf Inline um:

nav li {
  display: inline;
}

Jetzt können Sie noch Rahmen und Abstände hinzufügen:

nav li {
  display: inline;
  border: 1px solid black;
  padding: 10px;
  margin-right: 20px;
}

Mit display:none können Sie Element auch komplett entfernen. Wenn Sie beim Druck z.B. gar kein Menü sehen wollen, schreiben Sie:

nav {
  display: none;
}

4.8.5 Transformationen (CSS3)

Mit der Einführung von CSS3 (CSS Level 3) gibt es die in Programmiersprachen üblichen geometrischen Transformationen Translation, Rotation, Skalierung auch in CSS.

CSS3 ist noch mit etwas Vorsicht zu genießen. Obwohl es bereits seit 2000 in Entwicklung ist, gibt es bis heute keinen offiziellen Standard, aber die wichtigsten Features von CSS3 werden von allen Browsern unterstützt.

Transformationen kann man sich ähnlich wie position:relative vorstellen: das Element nimmt den originalen Platz im Layout ein und wird relativ zu diesem Standort verschoben, gedreht oder skaliert.

Wir schauen uns wieder ein einfaches Beispiel an:

<p>
  Lorem ipsum ...
</p>

<img id="pic1" src="hsa.png" alt="Logo der Hochschule Augsburg"/>

<p>
  Lorem ipsum ...
</p>

So sieht das ganze ohne Transformationen aus:

Bild ohne Transformationen

Translation

Bei der Translation werden einfach zwei Werte für die Verschiebung in x- und y-Richtung angegeben, z.B.

#pic1 {
  transform: translate(100px, -50px);
}

Das sieht dann so aus:

Bild mit Translation

Rotation

Bei der Rotation wird ein Winkel angegeben. Die Drehung erfolgt im Uhrzeigersinn:

#pic1 {
  transform: rotate(10deg);
}

Das sieht dann so aus:

Bild mit Rotation

Skalierung

Bei der Skalierung werden zwei Werte für die Skalierung in x- und y-Richtung angegeben, z.B.

#pic1 {
  transform: scale(1.5, 2);
}

Das sieht dann so aus:

Bild mit Skalierung

4.9 Stylesheet für Print

Wenn Sie eine Webseite drucken, möchten Sie nicht unbedingt die Webseite eins-zu-eins auf Papier bringen. Hier ist eine Liste von wünschenswerten Änderungen:

Das bedeutet, dass Sie entweder die bestehenden CSS-Infos anpassen oder eine komplett neue CSS-Datei anlegen wollen.

4.9.1 Eigene CSS-Datei für Print

Um eine eigene CSS-Datei anzulegen, kopieren Sie Ihre reguläre CSS-Datei und nennen Sie sie z.B. "print.css". Anschließend fügen Sie in allen HTML-Dateien im head einen Link hinzu, so dass Sie zwei Links haben. Mit der Eigenschaft media unterscheiden Sie zwischen der Bildschirmansicht (screen) und der Druckansicht (print).

<link href="css/style.css" rel="stylesheet" media="screen"/>
<link href="css/print.css" rel="stylesheet" media="print"/>

In der Print-CSS möchten Sie vielleicht die Schrift auf eine Serifenschrift schalten und die Größe in Punkt (pt) angeben. Außerdem möchten Sie die Farben auf schwarz-weiß schalten:

body {
  font-size: 12pt;
  font-family: "times new roman", times, serif;
  background-color: white;
  color: black;
}

Wenn Sie möchten, können Sie die URL der Links einblenden. Das ist zwar informativ, sieht aber nicht besonders schön aus. Probieren Sie es mit:

a[href]:after {
  content: " (Link <" attr(href) ">)";
}

Diese Vorgehensweise hat einerseits den Nachteil, dass Sie Codeduplizierung vorliegen haben, d.h. wenn Sie später screen.css ändern, müssen Sie evtl. die Änderunge in print.css nachziehen. Umgekehrt zeigt die Erfahrung, dass die Anweisungen für Screen und Print doch so unterschiedlich sind, dass eine Trennung in Dateien doch auch sinnvoll sein kann (in Print ändert sich i.d.R. weniger häufig etwas).

4.9.2 Alles in einer CSS-Datei

Es gibt auch die Möglichkeit, am Ende der einen CSS-Datei einen Abschnitt mit Anweisungen für Print anzulegen. Hier können natürlich Anweisungen, die weiter oben in der Datei stehen, modifiziert werden.

Dieser Block wird eingeklammert mit

@media print {

}

Innerhalb dieses Blocks können CSS-Regeln stehen.

Wollen Sie z.B. ein Navigationselement ausschalten, das den ID "navigation" hat, schreiben Sie

@media print {
    #navigation {
      display: none;
    }
}

Der Vorteil dieser Methode ist, dass Sie Codeduplizierung vermeiden. Der Nachteil ist, dass es evtl. etwas unübersichtlich wird.