Wasserfallkaskaden

CSS Grundlagen


Autoren: A. Grella, D. Supper, Elektronikschule Tettnang.

CSS (engl. cascading style sheets) wird für das Layout und Formatierung von HTML-Seiten verwendet. So wie das Wasser bei Kaskaden von Stufe zu Stufe weiterfließt, sorgt CSS dafür, dass das Layout und Format über alle HTML-Seiten hinweg identisch bleibt.

In diesem Artikel erhältst Du eine Einführung in CSS. Dabei werden die Bedeutung von Selektor, Eigenschaft und Wert erklärt und gezeigt wie man CSS-Code erstellt und in das Projekt einbindet. Des Weiteren werden alle wichtigen Informationen zu Farben, Schriftgröße und Schriftart gegeben.

CSS - Layoutbereiche Selektor, Eigenschaft und Wert

/*für das gesamte Dokument*/
body {
  font-family: Helvetica,Arial,sans-serif;
}

/*Größe der Überschriften*/
h1 {
  font-size: 2em;
}

/*Laoutbereich*/
.theme1 {
  background-color: black;
  color: white;
}

Für CSS werden im html-Dokument Layoutbereiche festgelegt. Dies können vorhandene Absätze oder Überschriften sein, aber auch frei wählbare Bereiche.

Möchte man das gesamte Dokument ansprechen, definiert man den Bereich body{}. Das Format von Überschriften kann man im Bereich h1{} festlegen. Eigene Layoutbereiche werden bspw. mit .theme1{} definiert und als Klassen bezeich­net. Hierfür muss im HTML-Dokument der Bereich <div class="theme1">...</div> angelegt werden.

Der Selektor ist der Name des Layoutbereichs. Mit der Eigenschaft werden bspw. Hintergrundfarbe, Schriftfarbe und Schriftart festgelegt. Beim Wert wird dann z.B. der gewünschte Farbton zugeordnet.

Alternativ können auch einmalig verwendete Layoutbereich über eine ID definiert werden <div id="spezial">...</div>. Diese werden im CSS mit #spezial{} definiert.

Kommentare werden mit /*...*/ angegeben.

Einbinden der CSS-Datei

In der Regel werden die CSS-Daten in einer externen Datei lib/css/custom.css gespeichert. Eingebunden wird die Datei dann im Header:
<head>
  <link href="lib/css/custom.css" rel="stylesheet">
 </head>

Bei einmaliger Layoutänderung ist auch ein inline-css zulässig:
<p style=" color: red;">Wichtig!</p>
Man beachte, dass inline-css eine höhere Priorität als die externe CSS-Datei hat.

Inhalt einer CSS-Datei
Abb. 1: Inhalt einer CSS-Datei.

Farben - Schriftgröße - Schriftarten

#FCE4EC
#F8BBD0
#F48FB1
#F06292
#EC407A
#E91E63
#D81B60
#C2185B
#AD1457
#880E4F
#E0F2F1
#B2DFDB
#80CBC4
#4DB6AC
#26A69A
#009688
#00897B
#00796B
#00695C
#004D40
#E1F5FE
#B3E5FC
#81D4FA
#4FC3F7
#29B6F6
#03A9F4
#039BE5
#0288D1
#0277BD
#01579B
Abb. 2: Farbpaletten von google material.
Google material Farbpaletten

Ein Farbwert wird mit dem Rot-, Grün- und Blauanteil einer Farbe definiert. Für jeden Frabanteil können 256 In­tensitäts­stufen in hexa­dezimaler Schreib­weise aus­gewählt werden: #RRGGBB. Da es sich um additive Farbmischung handelt entspricht eine weiße Schriftfarbe in CSS: color: #FFFFFF; und ein schwarzer Hintergrund: background-color: #000000;.

Farbpaletten erleichtern das Arbeiten mit verschiedenen Farben. So findet man bspw. passend abgestimmte Farben bei Google. Typischerweise wird auch mit angegeben, ob diese für einen Dark- oder Light-Mode geeignet sind.

Schriftgrößen gibt man typischerweise relativ zum Standardwert an: font-size: 2 em;. Alternativ kann man die Schriftgröße auch absolut angeben: font-size: 15 px;.

Schriftarten werden mit mehreren fall-back-Lösungen angeben: font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;.

Übung 1 Layoutbereiche: Farben, Schriftarten und Schriftgrößen

Formatiere Deine Internetseite.

CSS überarbeitete Internetseite
  1. Lege eine eigene CSS-Datei lib/css/custom.css an und öffne diese in einem Editor.
  2. Definiere für den body-Layoutbereich die Schriftart: Georgia, Times, 'Times New Roman', sans-serif und lege als Hintergrund­farbe einen hellen Farbton aus der Farbpalette fest.
  3. Binde im head-Bereich der html-Datei die o.g. Datei ein und Teste das Ergebnis. Beachte für CSS gibt es keine Fehlermeldungen, so dass man auf korrekte Schreibweise sehr exakt achten muss.
  4. Entwirf ein Layoutbereich .darkmode und .lightmode. Lege diese Bereiche in den verschiedenen html-Dokumenten fest.
  5. Definiere einheitliche Schriftgrößen.
  6. Überprüfe Dein Ergebnis mit dem Entwicklertool: Strg +  ↑  + I.
/*für das gesamte Dokument*/
body {
  font-family: Helvetica,Arial,sans-serif;
}

/*Größe der Überschriften*/
h1 {
  font-size: ...;
}

/*Laoutbereich*/
.darkmode {
  background-color: ...;
  color: ...;
}

Pseudoklassen

Pseudo­klassen sind Selektoren, deren Eigenschaften nur unter bestimmten Voraussetzungen angesprochen wird, bspw. wenn man mit der Maus über das Element fährt. Dabei können mehrere Pseudo­klassen durch Komma getrennt gleich­zeitig angesprochen werden.

Für Links gibt es fünf verschiedene Pseudoklassen:
a:link noch nicht besucht,
a:visited besucht,
a:hover mit der Maus darüber,
a:focus bei Erhalt des Fokus mit der Tab-Taste,
a:active im Moment des Klickens.

Möchte man nur Links einer bestimmten Klasse ansprechen, schreibt man zu Beginn des Selektors den Klassen­namen: .darkmode a:active.


/*für nicht besuchte und besuchte Links*/
a:link, a:visited {
  color: #555555;
  text-decoration: none;
}

/*für Links in einer bestimmten Klasse im Moment des Anklickens*/
.darkmode a:active {
  color: #CCCCCC;
  text-decoration: underline;
}

Übung 2 Welche Aussage ist wahr?

Wähle die korrekten Aussagen aus.

Nenne zwei Attribute, mit denen die Schrift manipuliert werden kann.
Wähle zwei Antworten.

  1. font-size
  2. size
  3. font-family
  4. font


Nenne zwei Einheiten mit denen die Schriftgröße manipuliert werden kann.
Wähle zwei Antworten.

  1. font-size: 10px;
  2. font-size: 2em;
  3. font-size: 7ft;
  4. font-size: 2m;



Wieso wählt man zu manchen Hintergrundfarben eine weiße Schrift?
Wähle eine Antwort.

  1. wegen des Kontrasts
  2. weil es besser aussieht
  3. aufgrund von Vorschriften
  4. weil es in Farbpaletten vorgegeben wird


Nenne einen Layoutbereich.
Wähle eine Antwort.

  1. Schule
  2. Klasse
  3. Name
  4. Geburtstag


Ein Anwender möchte in der Klasse theme1 folgenden Abschnitt:

Abschnitt 1

Er programmiert:
theme1{ background-color: #AAAAAA; color:#FFFFFF;}
Nenne die Anzahl der Fehler. Wähle eine Antwort.

  1. null
  2. eins
  3. zwei
  4. drei


Ein Anwender möchte in der Klasse theme2 folgenden Abschnitt:

Abschnitt 2

Tipp: Ausschlussverfahren - Nutze die Zusammensetzung des Farbtons aus drei Farben und deren Intensitätsstufen.
Nenne die korrekte Zeile Code. Wähle eine Antwort.

  1. .theme2{ background-color: #FF8822; color:#FFFFFF;}
  2. .theme2{ background-color: #9B5701; color:#FFFFFF;}
  3. .theme2{ background-color: #555555; color:#FFFFFF;}
  4. .theme2{ background-color: #01579B; color:#FFFFFF;}

Wortliste und Satzbausteine



der Layout­bereich, -e Layout­bereiche dienen u.a. der Formatierung von Schriftgröße und -art sowie von Hintergrund- und Schriftfarben.
der Se­lektor, -en der Name des Layoutbereichs
die Eigen­schaft, -en Eigenschaften in CSS sind bspw. font-size oder background-color.
der Wert, -e Werte in CSS sind dann die entsprechenden Schriftgrößen oder Farben der Eigenschaften.
der Kommen­tar, -en Ein Kommentar in CSS wird mit /* ... */ angegeben.
Einbinden der CSS-Datei Eine CSS-Datei wird im head-Bereich des html-Dokuments mit <link href="lib/css/custom.css" rel="stylesheet"> eingebunden.
der Farb­wert, -e Der Farbwert wird in CSS in hexa­dezimaler Schreib­weise angegeben. Es sind jeweils zwei Stellen für rot, blau und grün reserviert: color: #001122;
die Schrift­röße, -e Die Schrift­größe wird in CSS typischerweise relativ zum Standardwert angegeben: font-size: 2 em;.