Deutsche Übersetzung der Seite "CSS tutorial starting with HTML + CSS"
Originale Version: http://www.w3.org/Style/Examples/011/firstcss
Aktuelle - übersetzte - Version: http://www.ich-lerne-css.de/Style/Examples/011/firstcss/
Übersetzer: A.Friedrich
Bookmark: AddThis Social Bookmark Button

Sehr geehrter Leser dieses Dokumentes - bitte beachten Sie dass es sich bei dieser Seite um die Übersetzung eines W3C Textes handelt.
Der Original Text ist urheberrechtlich geschützt, bitte beachten Sie die im Originaldokument vermerkten Hinweise. Die Rechte an der Übersetzung selbst liegen allein beim Übersetzer. Der Übersetzer bedankt sich bei den folgenden Seiten im Ergebnis für Ihre Unterstützung: HB. Für eventuell vorhandene Fehler in der Übersetzung kann keine Gewähr übernommen werden, das einzig massgebliche und legitime Dokument ist das englische W3C Original.
Kommentare des Übersetzers sind als solche gekennzeichnet und unterliegen ebenfalls dem Copyright des Übersetzers. Diese sind nicht Bestandteil des englischen Originaldokumentes.

CSS Tutorial
HTML + CSS - ein Einstieg

Inhalt

Diese kleine CSS Tutorial richtet sich an all jene welche noch nie mit CSS zu tun hatten aber gerne über die Verwendung informiert sein möchten.

Keine Sorge, es wird nicht allzu kompliziert. Erklärt wird wie Sie HTML - und CSS Dateien erzeugen und Beide miteinannder in Einklang bringen können. Im Anschluss können Sie sich gerne weitere Tutorials durchlesen und Ihrer Webseite weitere HTML/CSS Elemente hinzuzufügen. Oder - wenn Sie grössere Projekte vorhaben - entscheiden Sie sich gleich für die Verwendung eines HTML oder CSS Editors um Zeit zu sparen.

Am Ende des Tutorials werden Sie eine HTML Seite erzeugt haben die in etwa so aussieht:

[Link to the final HTML page]

Die Ergebnisseite - komplett erstellt mit CSS.

Ich habe nie behauptet dass das Ganze sei hübsch ☺

Alert! Advanced: Hinweisbereiche wie dieser sind optional. Sie enthalten einige zusätzliche Informationen zum verwendeten HTML - und CSS Quelltext des Beispiels. Das “Ausrufezeichen!” am Beginn solcher Texte bedeutet dass es sich hier um anspruchsvollere Infos als im Rest des Textes handelt.

Schritt 1: Erzeugen der HTML Seite

Für dieses Tutorial wird die Verwendung eines einfachen Texteditors empfohlen, z.B. Notepad (unter Windows) , TextEdit (Mac) oder KEdit (KDE). Wenn Sie sich mit den Grundlagen vertraut gemacht haben können Sie auch gern zu richtigen HTML/CSS Editoren wechseln (welche in der Regel die Arbeit vereinfachen). Z.B. Style Master, Dreamweaver oder GoLive. Aber bei Ihrem ersten CSS Gehversuch sollten Sie sich nicht von den vielen Features eines solchen Editors ablenken lassen.

Verwenden Sie bitte keinen Dokumenteneditor wie Microsoft Word oder OpenOffice. Diese Programme erzeugen oftmals im Quelltext Zusatzzeichen welche in HTML oder CSS nichts zu suchen haben. Wir benötigen ganz einfache Textdateien für unseren Quelltext.

Schritt 1 wäre also einen beliebigen Text Editor zu starten (Notepad, TextEdit, KEdit oder etwas in dieser Richtung). Beginnen Sie mit einer leeren Datei und geben Sie das Folgende ein: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Meine erste HTML/CSS Seite</title>
</head>

<body>

<!-- Seiten Navigations Menu -->
<ul class="navbar">
  <li><a href="index.html">Startseite</a>
  <li><a href="musings.html">Hobbys</a>
  <li><a href="town.html">Meine Stadt</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Inhaltsbereich -->
<h1>Meine erste HTML/CSS Seite</h1>

<p>Willkommen auf meiner ersten HTML/CSS Seite!

<p>Es fehlen zwar noch ein paar Bilder, aber immerhin hat sie Style.
Und es gibt schon Verlinkungen - auch wenn diese im Moment noch nirgendwo hinführen&hellip;

<p>Hier wird irgendwann einmal noch mehr stehen, aber im Moment fällt mir einfach nichts ein.

<!-- Signatur - nur der Vollständigkeit halber -->
<address>Erstellt am 5 April 2004<br>
  von mir höchst persönlich.</address>

</body>
</html>

Sie müssen das Ganze nicht unbedingt abtippen, kopieren Sie einfach den obigen Text in Ihren Texteditor.

(Achten Sie bei der Verwendung von TextEdit auf dem Mac bitte darauf dass dieser auch wirklich einfachen Text produziert. Sie können dies in den Programmoptionen festlegen.)

Alert! Advanced: Die erste Zeile im Quelltext gibt dem Browser zu verstehen welche HTML Version verwendet werden soll. In diesem Fall handelt es sich um HTML Version 4.01.

Worte zwischen einem < und > werden als Tags bezeichnet. Wie Sie sehen können wird das Dokument von den zwei Tags <html> und </html> eingegrenzt. Der Bereich zwischen <head> und </head> wird für alle möglichen Arten von Informationen genutzt welche nicht auf dem Bildschirm ausgegeben werden. Bis jetzt enthält das Dokument nur einen Titel, aber später werden hier auch die CSS Style Sheet Informationen hinzugefügt.

Das <body> Tag zeigt an dass nun der eigentliche Text des Dokumentes beginnt. Prinzipiell wird alles auf dem Bildschirm angezeigt was hier zu finden ist - mit einer Aussnahme: Text zwischen <!-- und --> dient als Kommentar für Sie selbst und wird vom Browser ignoriert.

Eines der Tags in diesem Beipspiel erzeugt eine “Unordered List” (ungeordnete Liste), eine Aufzählung von Elementen ohne dass diese durchnummeriert werden. Einem Listenelement ist immer ein <li> Tag vorangestellt. <p> erzeugt einen Absatz und <a> einen “Anchor”, genutzt für das Erzeugen von Links.

der HTML Quelltext im Editor

Der HTML Quelltext im Editor.

Alert! Advanced: Wenn Sie weitere Details über die einzelnen Bedeutungen der HTML-Tags innerhalb der eckigen Klammern <…> erfahren möchten empfehlen wir Ihnen einen Besuch dieser Seite: Getting started with HTML. Aber nun ein paar Worte zur Struktur unserer HTML Beispielseite.

Nehmen Sie bitte zur Kenntnis das die Tags “li” und “p” nicht beendet wurden. In HTML (nicht in XHTML) ist es erlaubt auf die Tags </li> and </p> zu verzichten..so wie hier geschehen. Sie können sie natürlich auch hinzufügen wenn Sie möchten, ich habe sie jetzt nur aus Gründen der besseren Lesbarkeit weggelassen.

Lassen Sie uns davon ausgehen dass es sich hier um eine Webseite mit vielen ähnlichen Unterseiten handelt. Wie heutzutage üblich besitzt die Seite ein Navigations Menu um zu den einzelnen Unterseiten zu navigieren, verschiedene Texte pro Unterseite und eine immer gleiche Signatur am Seitenende.

Wählen Sie nun “Speichern unter…” im Datei Menu Ihres Editors und speichern Sie die Datei unter dem Namen “mypage.html” z.B. auf Ihrem Desktop ab. Bitte schliessen Sie den Editor noch nicht, wir werden ihn noch benötigen.

(Achten Sie bitte darauf dass Ihr Editor der Datei nicht noch eine zusätzliche Endung .txt anhängt - die Datei muss unbedingt die Endung .html besitzen)

Als nächstes öffnen Sie mypage.html in einem beliebigen Browser. Entweder doppelklicken Sie dafür mit der Maus auf den Dateinamen im z.B. Dateimanager um den Standardbrowser zu öffnen - oder Sie wählen im Browser die Option “Datei öffnen…”. Eine dritte Möglichkeit ist es die Datei per drag-n-drop direkt in einen geöffneten Browser zu ziehen.

Soweit sogut - aber - wie Sie sehen schaut die Seite noch ziemlich langweilig aus.…

Schritt 2: Farben

Vermutlich sehen Sie nur schwarzen Text auf weissem Hintergrund, das hängt aber auch von der Einstellung Ihres Browsers ab. Ein einfacher Weg die Seite aufzuwerten ist das Hinzufügen von Farben. (Bitte lassen Sie den Browser geöffnet)

Wir werden damit beginnen CSS Style Sheets direkt in der HTML Seite einzubetten. Später werden wir den CSS Quelltext in eine separate Datei auslagern. Separate CSS Dateien machen dann Sinn wenn Sie den gleichen CSS Quelltext in mehreren Einzelseiten immer wieder verwenden möchten. Sie müssen dann das Ganze nicht immer wieder aufs Neue schreiben. Aber jetzt werden wir ersteinmal alles in eine Datei packen.

Wir beginnen mit dem Hinzufügen eines <style> Elements zur HTML Seite. Die Style Sheets werden später innerhalb dieses Elements eingebettet. Also wechseln Sie bitte zurück in Ihren Editor und fügen die folgenden fünf Zeilen in den Kopfbereich der HTML Datei ein. Die hinzuzufügenden Zeilen (Zeile 5 bis 9) sind hier rot markiert. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Meine erste HTML/CSS Seite</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[etc.]

Die erste Zeile zeigt dass es sich hier um CSS handelt (“text/css”). In der zweiten Zeile bestimmen wir dass alle Folge-Style Sheets für das “body” Element gelten sollen. Die dritte Zeile formatiert den gesamten Text mit der Farbe lila und die letzte Zeile setzt die Hintergrundfarbe auf einen grün-weiss-Ton.

Alert! Advanced: Style Sheets in CSS basieren auf Regeln. Jede Regel besteht aus drei Teilen:

  1. Ein Selector (in unserem Beispiel “body”) welcher dem Browser mitteilt welche Elemente des Dokumentes von der Regel beeinflusst werden sollen
  2. Die Eigenschaft (hier sind es die Eigenschaften 'color' und 'background-color') welche festlegt auf welche Art ein Element verändert werden soll
  3. Der Wert ('purple' und '#d8da3d') um den Eigenschaften oben einen Wert zuzuweisen

Unser Beispiel zeigt dass Regeln zusammengefasst werden können. Normalerweise hätten wir zwei separate Regeln implementieren müssen: 

body { color: purple }
body { background-color: #d8da3d }

aber weil beide Regeln das gleiche Element beeinflussen haben wir nur einmal “body” geschrieben und die Eigenschaften und Werte des Elementes eingefügt. Für weitere Selektoren lesen Sie auch Kapitel 2 von Lie & Bos.

Der Hintergrund des body Elements entspricht dem gesamten Hintergrund einer Seite. Wir haben kein CSS für weitere Elemente festgelegt (p, li, address…) so dass diese standardmässig einen transparenten Hintergrund erhalten werden. Die Eigenschaft 'color' legt die Farbe des Textes im body Element fest. Alle Elemente innerhalb des body Elements werden diese Textfarbe ebenfalls übernehmen - es sei denn sie wird explizit für ein anderes Element neu festgelegt (das werden wir später durchführen).

Nun speichern Sie die Datei bitte wieder ab und wechseln Sie zurück zu dem noch immer geöffneten Browser. Mit einem Klick auf das “Aktualisieren” Icon im Browser sollte die Anzeige von der vormals “langweiligen” Seite zu einer farbenfroheren Variante wechseln. Der Text im Dokument sollte nun lila über einem grün-gelben Hintegrund dargestellt werden.

Screenshot einer farbigen Seite im Konqueror

So sieht unsere Seite nun im Browser mit Farben aus.

Alert! Advanced: Farben können in CSS auf verschiedenen Wegen dargestellt werden. Unser Beispiel zeigt zwei von ihnen: mit dem englischen Namen (“purple”) oder mit Hilfe des hexadezimalen Farbcodes (“#d8da3d”). Es sind über 140 Farbnamen verfügbar und durch den Hexa-Code können über 16 Millionen Farben erzeugt werden. Die Seite Adding a touch of style gibt weiteren Aufschluss über die Nutzung dieser Codes.

Schritt 3: Fonts

Eine andere einfache Möglichkeit um Ihre Seite aufzuwerten ist die Verwendung unterschiedlicher Schriftarten (Fonts) für die einzelnen Seitenelemente. Lassen Sie uns den Text mit dem Font “Georgia” versehen und die h1 Überschrift mit dem Font “Helvetica.”.

Sie können natürlich niemals wissen welche Schriftarten vom Browser eines Seitenbesuchers dargestellt werden können (so bietet Linux z.B. andere Standardfonts als Windows), also bestimmen Sie Alternativ-Fonts im Falle des fehlenden Haupt-Fonts. Wird z.B. der Font Georgia vermisst soll der Text in Times New Roman oder Times angezeigt werden. Klappt das auch nicht so soll irgendein Font mit Serifen eingesetzt werden. Wenn Helvetica fehlt soll die Anzeige mit Geneva, Arial oder SunSans-Regular erfolgen. Klappt das nun auch nicht so erfolgt die Anzeige mit einer beliebigen Serifen-losen Schriftart.

Fügen Sie unserem Dokument in Ihrem Texteditor die folgenden Zeilen (Zeilen 7-8 und 11-13) hinzu: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Meine erste HTML/CSS Seite</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]

Wenn Sie die Datei erneut abspeichern und auf “Aktualisieren” klicken sollten im Text und der Überschrift verschiedene Schriftarten Einsatz finden.

Screenshot with fonts added

Nun unterscheiden sich die Fonts vom Text und der Überschrift.

Schritt 6: eine horizontale Linie

Die letzte von uns verwendete Regel wird eine horizontale Linie mit Hilfe des 'border-top' Attributes werden. Wir werden diese auf das <address> Element anwenden um eine gepunktete Linie am oberen Elementerand zu erhalten (Zeilen 34-37): 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Meine erste HTML/CSS Seite</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[etc.]

Nun ist unser Style komplett. Lassen sie uns nun versuchen den Style Sheet in eine separate Datei auszulagern damit auch andere Seiten unser CSS nutzen können.

Schritt 7: Auslagern des CSS Quelltexts

Wir haben nun eine HTML Seite erstellt und die Style Sheets darin eingebettet. Aber wenn Ihre Seite weiter wachsen wird werden sicherlich die gleichen Styles immer wieder Anwendung finden. Ab hier macht es Sinn eine separate CSS Datei zu erstelen welche von allen Ihren Seiten eingebunden und genutzt wird.

Um eine Style Sheet Datei zu erzeugen erstellen Sie bitte eine neue - leere - Textdatei in Ihrem Editor.

Kopieren Sie dann den gesamten Code des <style> Elementes aus Ihrer HTML Seite in diese leere Datei. Bitte kopieren Sie die Tags <style> und </style> jedoch nicht mit - nur alles zwischen Beiden wird benötigt. Ihre CSS Datei sollte jetzt in etwa so aussehen: 

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Speichern Sie diese Datei nun um gleichen Ordner wie mypage.html unter dem Namen “mystyle.css” ab. Bitte achten Sie wieder darauf dass Ihr Texteditor keine zweite Endung ".txt" anhängt.

Nun wechseln Sie wieder zurück zur Bearbeitung Ihres HTML Codes. Entfernen Sie ALLES zwischen den Tags <style> und </style> und fügen Sie stattdessen das folgende <link> Element ein (Zeile 5): 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Meine erste HTML/CSS Seite</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

Dies wird dem Browser mitteilen dass er die Style Sheets aus der Datei “mystyle.css” laden soll. Er wird diese - da kein Verzeichnis weiter angegeben wurde - im gleichen Pfad wie mypage.html suchen.

Wenn Sie die HTML Datei abspeichern und die Seite neu laden sollten Sie keinen Unterschied feststellen. Es werden ja die gleichen Style Sheets verwendet, nur dass sie nun aus einer externen Quelle eingelesen wurden.

Das Endresultat

Das Endresultat

Zu guter Letzt möchten Sie sicherlich Ihre neue Internetseite auf den Webspace Ihrer Internetpräsenz hochladen (nach einigen kleineren Änderungen...). Für die genaue Vorgehensweise konsultieren Sie jedoch bitte Ihren Provider.

Weiterführende Informationen

Für einen Einstieg in CSS lesen sie das Kapitel 2 of Lie & Bos, oder Dave Raggett's intro to CSS.

Weitere Informationen, inklusive vieler Beispiele, finden Sie auf der Seite learning CSS.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos, CSS contact
Created 5 Apr 2004. Last updated $Date: 2007/01/25 13:58:57 $ GMT

IMPRESSUM