it:css:css-01a:01

Inhaltsverzeichnis

Erste Schritte

Erste Schritte

Hinweis Bitte beachte die Konventionen dieser Dokumentation.

Voraussetzungen Kenntnisse im Umgang mit einem Computer und in HTML.

Werkzeuge Ein Computer und ein Editor.

Ziel Sicherer Umgang in der Anwendung von CSS.

Zielgruppe Anfänger von 10-100.

CSS (Cascading Style Sheets) dient der Formatierung von HTML-Seiten und anderen Dokumententypen durch mehrstufige Stilangaben. HTML ist eine Auszeichnungssprache, die Seiteninhalte hierarchisch strukturiert. CSS ist eine Formatierungssprache, die Seiteninhalte gestaltet.

Hinweis Die Abkürzung CSS wird in dieser Dokumentation im Singular verwendet.

HTML-Seite ohne CSS

CSS ist nicht zwingend notwendig, um Seiteninhalte lesbar zu machen, wie ❑CSS1 zeigt.

CSS1: HTML-Seite ohne Stilangaben.

Ξ HTML-Code ❑CSS1 Ξ

Der HTML-Code von ❑CSS1 besteht aus der Struktur in Form der Tags {HTML-Elemente} und den Inhalten.

HTML-Code css_01.htm

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Überschrift 1</h1>
    <h2>Überschrift 2</h2>
    <h3>Überschrift 3</h3>
    <h4>Überschrift 4</h4>
    Ein Text ohne Absatz und ohne Stilangaben!
  </body>
</html>

HTML-Seite mit integrierten CSS

Stilangaben sorgen nicht nur für die Formatierung, sondern auch für die Betonung und die bessere Lesbarkeit. Die Stilangaben können in der HTML-Seite an zentraler Stelle erfolgen wie in ❑CSS2.

CSS2: HTML-Seite mit Stilangaben in der HTML-Seite.

Ξ Code ❑CSS2 Ξ

Der Code von ❑CSS2 beinhaltet die Seiteninformationen und Stilangaben.

HTML/CSS-Code css_02.htm

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      h1 {
        font-family: Open Sans, Helvetica, Arial, sans-serif;
        font-size: 1.6em;
        color: #a0a0a0;
      }

      h2 {
       font-family: Open Sans, Helvetica, Arial, sans-serif;
       font-size: 1.4em;
       color: #707070;
      }

      h3 {
        font-family: Open Sans, Helvetica, Arial, sans-serif;
        font-size: 1.2em;
        color: #000000;
      }

      h4 {
        font-family: Open Sans, Helvetica, Arial, sans-serif;
        font-size: 0.8em;
        color: brown;
      }

      p {
        font-family: Open Sans, Helvetica, Arial, sans-serif;
        color: orange;
        text-align: right;
      }
    </style> 
  </head>
  <body>
    <h1>Überschrift 1</h1>
    <h2>Überschrift 2</h2>
    <h3>Überschrift 3</h3>
    <h4>Überschrift 4</h4>
      <p>Ein Text im Absatz mit Stilangaben!</p>   
  </body>
</html>

Funktionsweise

Die Stilangaben stehen zwischen den Tags <style></style> im Kopfbereich der HTML-Seite.

h1 definiert die Formatierung der entsprechenden <h1>Überschrift 1</h1>.

h1 {
  font-family: Open Sans, Helvetica, Arial, sans-serif;
  font-size: 1.6em;
  color: #a0a0a0;
}

Das Schema allgemein:

h1 {
  Eigenschaft: Wert;
  ...
}

Für h1 gilt::

h1 = Selektor
font-family = Eigenschaft
Open Sans, Helvetica, Arial, sans-serif = Wert
font-size = Eigenschaft
1.6em = Wert
color = Eigenschaft
#a0a0a0 = Wert

h1 macht Angaben über die:

erwünschten Schriftarten – Open Sans oder Helvetica oder Arial oder sans-serif in der Reihenfolge der Verfügbarkeit auf dem Anzeigegerät
Schriftgröße – 1.6em = 1,6-fache Größe der Grundeinstellung des Browsers
Schriftfarbe in Form eines Farbcodes – #a0a0a0

Mit teilweise abweichenden Werten sind h2 - h4 definiert. h4 bestimmt einen Farbnamen (ohne #) anstelle eines Farbcodes.

p definiert einen Textabsatz mit der gleichen Schriftfamilie wie in h1 - h2, jedoch mit oranger Schriftfarbe und rechtsbündiger Textausrichtung.

p {
  font-family: Open Sans, Helvetica, Arial, sans-serif;
  color: orange;
  text-align: right;
}

Die Stilangaben können alternativ in den Tags erfolgen wie in ❑CSS3. Diese Möglichkeit widerspricht der Idee, Struktur und Gestaltung zu trennen und sollte nicht oder nur sparsam verwendet werden.

CSS3: Das Erscheinungsbild von ❑CSS2 und ❑CSS3 ist identisch.

Ξ Code ❑CSS3 Ξ

HTML/CSS-Code css_03.htm

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1 style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 1.6em; color: #a0a0a0;">Überschrift 1</h1>
    <h2 style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 1.4em; color: #707070;">Überschrift 2</h2>
    <h3 style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 1.2em; color: #000000;">Überschrift 3</h3>
    <h4 style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 0.8em; color: brown;">Überschrift 4</h4>
      <p style="font-family: Open Sans, Helvetica, Arial, sans-serif; text-align: right; color: orange;">Ein Text im Absatz mit Stilangaben!</p>   
  </body>
</html>

HTML-Seite mit referenzierten CSS

Dienen die Stilangaben mehreren HTML-Dateien, ist eine separate .css-Datei sinnvoller, die in jeder HTML-Seite referenziert ist.

CSS4: HTML-Seite mit Stilangaben in der referenzierten css_04.css.

Ξ Code ❑CSS4 Ξ

HTML-Code css_04.htm

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel=stylesheet type="text/css" href="../lib/css_04.css"> 
  </head>
  <body>
    <h1>Überschrift 1</h1>
    <h2>Überschrift 2</h2>
    <h3>Überschrift 3</h3>
    <h4>Überschrift 4</h4>
      <p>Ein Text im Absatz mit Stilangaben!</p>   
  </body>
</html>

CSS-Code css_04.css

h1 {
   font-family: Open Sans, Helvetica, Arial, sans-serif;
   font-size: 1.6em;
   color: #a0a0a0;
}

h2 {
   font-family: Open Sans, Helvetica, Arial, sans-serif;
   font-size: 1.4em;
   color: #707070;
}

h3 {
   font-family: Open Sans, Helvetica, Arial, sans-serif;
   font-size: 1.2em;
   color: #000000;
}

h4 {
   font-family: Open Sans, Helvetica, Arial, sans-serif;
   font-size: 0.8em;
   color: brown;
}

p {
  font-family: Open Sans, Helvetica, Arial, sans-serif;
  color: orange;
  text-align: right;
}

Funktionsweise

Die Stilangaben sind als Link <link rel=stylesheet type="text/css" href="../lib/css_04.css"> auf die .css-Datei angegeben.

Eine abweichende Stilangabe zur referenzierten .css-Datei kann (grundsätzlich) in dem Tag der HTML-Seite erfolgen wie in ❑CSS5. Abweichende Stilangaben entsprechen dem Prinzip der Mehrstufigkeit {Kaskadierung}, sollten jedoch bevorzugt in der .css-Datei erfolgen wie in ❑CSS6.

CSS5: HTML-Seite mit Stilangaben in der referenzierten css_05.css und in der HTML-Seite.

Ξ Code ❑CSS5 Ξ

HTML-Code css_05.htm

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel=stylesheet type="text/css" href="../lib/css_05.css"> 
  </head>
  <body>
    <h1>Überschrift 1</h1>
    <h2>Überschrift 2</h2>
    <h3>Überschrift 3</h3>
    <h4>Überschrift 4</h4>
      <p>Ein Text im Absatz mit Stilangaben!</p>
      <p style="font-family: Purisa, Zekton Free, Chilanka; text-align: center; color: blue;">Ein Text im Absatz mit neuen Stilangaben!</p> 
  </body>
</html>

CSS-Code css_05.css

body {
   font-family: Open Sans, Helvetica, Arial, sans-serif;
}

h1 {
   font-size: 1.6em;
   color: #a0a0a0;
}

h2 {
   font-size: 1.4em;
   color: #707070;
}

h3 {
   font-size: 1.2em;
   color: #000000;
}

h4 {
   font-size: 0.8em;
   color: brown;
}

p {
  color: orange;
  text-align: right;
}

Funktionsweise

Die .css-Datei definiert die Schriftarten durch den Tag-Selektor body. Damit sind alle HTML-Elemente mit diesen Schriftarten formatiert. Die Angaben der Schriftarten in einzelnen HTML-Elementen erübrigen sich damit, sofern keine Abweichungen erwünscht sind.

Der neue Absatz <p style="font-family: Purisa, Zekton Free, Chilanka; text-align: center; color: blue;">Ein Text im Absatz mit neuen Stilangaben!</p> erscheint mit einer neuen Formatierung, welche die in der .css-Datei überschreibt. Welche der angegebenen Schriftarten angezeigt wird, hängt von dem verwendeten Anzeigegerät ab. Ist keine der Schriftarten verfügbar, kommt die Standardeinstellung des Browsers zur Anwendung.

Neben den Tag-Selektoren kennt CSS auch Class- und ID-Selektoren. In ❑CSS6 dienen sie dazu, um bereits festgelegte Formatierungen zu überschreiben. Das ist das Prinzip der Mehrstufigkeit.

CSS6: HTML-Seite mit Stilangaben in der referenzierten css_06.css.

Ξ Code ❑CSS6 Ξ

HTML-Code css_06.htm

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel=stylesheet type="text/css" href="../lib/css_06.css"> 
  </head>
  <body>
    <h1>Überschrift 1</h1>
    <h2>Überschrift 2</h2>
    <h3>Überschrift 3</h3>
    <h4>Überschrift 4</h4>
      <p>Ein Text im Absatz mit Stilangaben!</p>
      <p class="format1">Ein Text im Absatz mit neuen Stilangaben einer Klasse!</p> 
      <p class="format1">Ein Text in einem neuen Absatz mit den Stilangaben wie im vorherigen Absatz!</p>
      <p id="absatz">Ein Text im Absatz mit neuen Stilangaben einer ID!</p> 
  </body>
</html>

CSS-Code css_06.css

body {
   font-family: Open Sans, Helvetica, Arial, sans-serif;
}

h1 {
   font-size: 1.6em;
   color: #a0a0a0;
}

h2 {
   font-size: 1.4em;
   color: #707070;
}

h3 {
   font-size: 1.2em;
   color: #000000;
}

h4 {
   font-size: 0.8em;
   color: brown;
}

p {
  color: orange;
  text-align: right;
}

.format1 {
   font-family: Purisa, Zekton Free, Chilanka;
   text-align: center; 
   color: blue;
}

#absatz {
  color: green;
}

Funktionsweise

Der Tag-Selektor:

Jeder Tag-Selektor bezieht sich auf die Tags der referenzierten Seite.
In ❑CSS6 existieren die Tag-Selektoren h1 - h4 und p.
p stellt alle Elemente orange + rechtsbündig dar, die zwischen den Tags <p></p> stehen – sofern sie nicht überschrieben sind.

Der Class-Selektor:

Ein Class-Selektor spricht ein einzelnes Element an oder alle Elemente dieser Klasse.
In ❑CSS6 existieren zwei Absätze mit einer Klasse <p class="format1">. Entsprechend erscheint der Text blau und zentriert. Ist keine der Schriftarten Purisa oder Zekton Free oder Chilanka auf dem Anzeigegerät verfügbar, erscheint der Text in der Standardschrift des Browsers.

Der ID-Selektor:

Ein ID-Selektor spricht ein einzelnes Element mit dieser ID an.
In ❑CSS6 existiert ein Absatz mit einer ID <p id="absatz">. Entsprechend erscheint der Text grün und rechtsbündig, da keine neue Textausrichtung definiert ist.
Eine ID darf nicht mit einer Ziffer beginnen.