unslug de: move

9 files changed, 0 insertions, 1643 deletions

diff --git a/files/de/web/guide/css/getting_started/farbe/index.html b/files/de/web/guide/css/getting_started/farbe/index.html
deleted file mode 100644
index be9302eb6e..0000000000
--- a/files/de/web/guide/css/getting_started/farbe/index.html
+++ /dev/null
@@ -1,333 +0,0 @@
----
-title: Color
-slug: Web/Guide/CSS/Getting_started/Farbe
-translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
-translation_of_original: Web/Guide/CSS/Getting_started/Color
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Textstyles", "Text styles")}}Das ist der achte Teil des <a href="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er erklärt, wie man Farben in CSS angeben kann. In Ihrem Stylesheet werden Sie Hintergrundfarben einführen.</p>
-
-<h2 class="clearLeft" id="Information_Farbe">Information: Farbe</h2>
-
-<p>In diesem Tutorial haben Sie soweit wenige der benannten Farben verwendet. CSS 2 unterstützt insgesamt 17 benannte Farben. Einige der Namen lauten aber nicht wie erwartet:</p>
-
-<table style="border: 0px; margin-left: 2em; text-align: right;">
- <tbody>
-  <tr>
-   <td> </td>
-   <td>black</td>
-   <td style="width: 2em; height: 2em; background-color: black;"> </td>
-   <td>gray</td>
-   <td style="width: 2em; height: 2em; background-color: gray;"> </td>
-   <td>silver</td>
-   <td style="width: 2em; height: 2em; background-color: silver;"> </td>
-   <td>white</td>
-   <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td>
-  </tr>
-  <tr>
-   <td>primär</td>
-   <td>red</td>
-   <td style="width: 2em; height: 2em; background-color: red;"> </td>
-   <td>lime</td>
-   <td style="width: 2em; height: 2em; background-color: lime;"> </td>
-   <td>blue</td>
-   <td style="width: 2em; height: 2em; background-color: blue;"> </td>
-  </tr>
-  <tr>
-   <td>sekundär</td>
-   <td>yellow</td>
-   <td style="width: 2em; height: 2em; background-color: yellow;"> </td>
-   <td>aqua</td>
-   <td style="width: 2em; height: 2em; background-color: aqua;"> </td>
-   <td>fuchsia</td>
-   <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td>
-  </tr>
-  <tr>
-   <td> </td>
-   <td>maroon</td>
-   <td style="width: 2em; height: 2em; background-color: maroon;"> </td>
-   <td>orange</td>
-   <td style="width: 2em; height: 2em; background-color: orange;"> </td>
-   <td>olive</td>
-   <td style="width: 2em; height: 2em; background-color: olive;"> </td>
-   <td>purple</td>
-   <td style="width: 2em; height: 2em; background-color: purple;"> </td>
-   <td>green</td>
-   <td style="width: 2em; height: 2em; background-color: green;"> </td>
-   <td>navy</td>
-   <td style="width: 2em; height: 2em; background-color: navy;"> </td>
-   <td>teal</td>
-   <td style="width: 2em; height: 2em; background-color: teal;"> </td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>
-
-<div class="tuto_details">
-<div class="tuto_type">Details</div>
-
-<p>Ihr Webbrowser könnte viel mehr benannte Farben unterstützen, wie zum Beispiel:</p>
-
-<table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;">
- <tbody>
-  <tr>
-   <td>dodgerblue</td>
-   <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td>
-   <td>peachpuff</td>
-   <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td>
-   <td>tan</td>
-   <td style="width: 2em; height: 2em; background-color: tan;"> </td>
-   <td>firebrick</td>
-   <td style="width: 2em; height: 2em; background-color: firebrick;"> </td>
-   <td>aquamarine</td>
-   <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td>
-  </tr>
- </tbody>
-</table>
-
-<p>Mehr Details zur erweiterten Liste finden Sie unter <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> im CSS 3 Color Module. Vermeiden Sie Farben, die vom Webbrowser des Lesers möglicheweise nicht unterstützt werden.</p>
-</div>
-
-<p>Für eine größere Farbpalette geben Sie die rot, grün und blau Komponenten der gewünschten Farbe mit einem Nummernzeichen (Hash) und drei <em>hexadezimalen</em> Ziffern im Bereich von 0 – 9 und a – f an. Die Buchstaben a – f repräsentieren die Werte 10 – 15:</p>
-
-<table style="border: 0px; margin-left: 2em;">
- <tbody>
-  <tr>
-   <td>schwarz</td>
-   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
-   <td><code>#000</code></td>
-  </tr>
-  <tr>
-   <td>reines rot</td>
-   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
-   <td><code>#f00</code></td>
-  </tr>
-  <tr>
-   <td>reines grün</td>
-   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
-   <td><code>#0f0</code></td>
-  </tr>
-  <tr>
-   <td>reines blau</td>
-   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
-   <td><code>#00f</code></td>
-  </tr>
-  <tr>
-   <td>weiß</td>
-   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
-   <td><code>#fff</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p><br>
- Für die volle Farbpalette geben sie zwei hexadezimale Ziffern für jede Farbkomponente an:</p>
-
-<table style="border: 0px; margin-left: 2em;">
- <tbody>
-  <tr>
-   <td>schwarz</td>
-   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
-   <td><code>#000000</code></td>
-  </tr>
-  <tr>
-   <td>reines rot</td>
-   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
-   <td><code>#ff0000</code></td>
-  </tr>
-  <tr>
-   <td>reines grün</td>
-   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
-   <td><code>#00ff00</code></td>
-  </tr>
-  <tr>
-   <td>reines blau</td>
-   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
-   <td><code>#0000ff</code></td>
-  </tr>
-  <tr>
-   <td>weiß</td>
-   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
-   <td><code>#ffffff</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>Sie können normalerweise diese sechstelligen hexadezimalen Code in einem Grafikprogramm oder einem anderen Tool finden.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Beispiel</div>
-
-<p>Mit ein wenig Übung können Sie dreistellige Farben für die meisten Zwecke manuell anpassen:</p>
-
-<table style="background-color: #fffff4; border: 0px; margin-left: 2em;">
- <tbody>
-  <tr>
-   <td>Starten Sie mit reinem rot:</td>
-   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
-   <td><code>#f00</code></td>
-  </tr>
-  <tr>
-   <td>Um es blasser zu machen, fügen Sie ein wenig grün und blau hinzu:</td>
-   <td style="width: 2em; height: 2em; background-color: #f77;"> </td>
-   <td><code>#f77</code></td>
-  </tr>
-  <tr>
-   <td>Um es mehr orange zu machen, fügen Sie ein wenig mehr grün hinzu:</td>
-   <td style="width: 2em; height: 2em; background-color: #fa7;"> </td>
-   <td><code>#fa7</code></td>
-  </tr>
-  <tr>
-   <td>Um es dunkler zu machen, reduzieren sie alle Farbkomponenten:</td>
-   <td style="width: 2em; height: 2em; background-color: #c74;"> </td>
-   <td><code>#c74</code></td>
-  </tr>
-  <tr>
-   <td>Um die Sättigung zu reduzieren, gleichen sie die Farbkomponenten ein wenig an:</td>
-   <td style="width: 2em; height: 2em; background-color: #c98;"> </td>
-   <td><code>#c98</code></td>
-  </tr>
-  <tr>
-   <td>Wenn die Farbkomponenten exakt gleich sind, erhalten Sie grau:</td>
-   <td style="width: 2em; height: 2em; background-color: #ccc;"> </td>
-   <td><code>#ccc</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>Für einen Pastellton wie ein blasses blau:</p>
-
-<table style="background-color: #fffff4; border: 0px; margin-left: 2em;">
- <tbody>
-  <tr>
-   <td>Starten Sie mit reinem weiß:</td>
-   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
-   <td><code>#fff</code></td>
-  </tr>
-  <tr>
-   <td>Reduzieren Sie die anderen Farbkomponenten ein wenig:</td>
-   <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td>
-   <td><code>#eef</code></td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type">Mehr Details</div>
-
-<p>Sie können Farben auch mit dezimalen RGB Werten im Bereich von 0 – 255 oder mit Prozenten angeben.</p>
-
-<p>Das ist zum Beispiel Kastanienbraun (dunkles rot):</p>
-
-<pre class="brush:css">rgb(128, 0, 0)
-</pre>
-
-<p>Alle Details zur Angabe von Farben finden sie unter <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> in der CSS Spezifikation.</p>
-
-<p>Mehr Information zur Abstimmung von Farbsystemen wie Menu und ThreeDFace finden Sie unter <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> in der CSS Spezifikation.</p>
-</div>
-
-<h3 id="Farbeigenschaften">Farbeigenschaften</h3>
-
-<p>Sie haben bereits die {{ cssxref("color") }} Eigenschaft auf Text angewendet.</p>
-
-<p>Sie können auch die {{ cssxref("background-color") }} Eigenschaft verwenden, um die Hintergrundfarbe eines Elements zu verändern.</p>
-
-<p>Hintergründe können auf <code>transparent</code> gesetzt werden, um explizit die Hintergrundfarbe zu entfernen. Somit ist der Hintergrund des Elternelements sichtbar.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Beispiel</div>
-
-<p>Die <strong>Beispiel-</strong>Boxen in diesem Tutorial verwenden dieses blasse gelb als Hintergrund:</p>
-
-<pre class="brush:css">background-color: #fffff4;
-</pre>
-
-<p>Die <strong>Mehr Details</strong>-Boxen verwenden dieses blasse grau:</p>
-
-<pre class="brush:css">background-color: #f4f4f4;
-</pre>
-</div>
-
-<p> </p>
-
-<h2 id="Aktion_Farbcodes_verwenden">Aktion: Farbcodes verwenden</h2>
-
-<ol>
- <li>Bearbeiten Sie Ihre CSS Datei.</li>
- <li>Make the change shown here in bold, to give the initial letters a pale blue background. (The layout and comments in your file probably differ from the file shown here. Keep the layout and comments the way you prefer them.)
-  <pre class="brush:css;highlight:[13]">/*** CSS Tutorial: Color page ***/
-
-/* page font */
-body {font: 16px "Comic Sans MS", cursive;}
-
-/* paragraphs */
-p {color: blue;}
-#first {font-style: italic;}
-
-/* initial letters */
-strong {
-  color: red;
-  background-color: #ddf;
-  font: 200% serif;
-  }
-
-.carrot {color: red;}
-.spinach {color: green;}
-</pre>
- </li>
- <li>Save the file and refresh your browser to see the result.</li>
-</ol>
-
-<table>
- <tbody>
-  <tr>
-   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>heets</td>
-  </tr>
-  <tr>
-   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="tuto_example">
-<div class="tuto_type">Herausforderung</div>
-
-<p>In your CSS file, change all the color names to 3-digit color codes without affecting the result.</p>
-
-<p>(This cannot be done exactly, but you can get close. To do it exactly you need 6-digit codes, and you need to look up the CSS Specification or use a graphics tool to match the colors.)</p>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<p>The following values are reasonable approximations of the named colors:</p>
-
-<pre class="brush: css">strong {
-  color: #f00; /* red */
-  background-color: #ddf; /* pale blue */
-  font: 200% serif;
-}
-
-.carrot {
-  color: #fa0; /* orange */
-}
-
-.spinach {
-  color: #080; /* dark green */
-}
-
-p {
-  color: #00f; /* blue */
-}
-</pre>
-
-<p> </p>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="#tutochallenge" title="Display a possible solution for the challenge">Sehen Sie sich die Lösung an.</a></div>
-
-<h2 id="What_next">What next?</h2>
-
-<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}Your sample document and your sample stylesheet strictly separate content from style. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Content">next section</a> explains how you can make exceptions to this strict separation.</p>
diff --git a/files/de/web/guide/css/getting_started/index.html b/files/de/web/guide/css/getting_started/index.html
deleted file mode 100644
index 9472041b96..0000000000
--- a/files/de/web/guide/css/getting_started/index.html
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: Einführung
-slug: Web/Guide/CSS/Getting_started
-tags:
-  - CSS
-  - 'CSS:Einführung'
-translation_of: Learn/CSS/First_steps
-translation_of_original: Web/Guide/CSS/Getting_started
----
-<h3 id="Einleitung">Einleitung</h3>
-<p>Dieser Artikel stellt eine Einführung in Cascading Style Sheets (CSS) dar.</p>
-<p>Die Führung durch die grundlegenden Möglichkeiten von CSS ist mit einigen praktischen Beispielen zum Testen auf dem eigenen Computer untermalt. Das Tutorial gliedert sich in zwei Teile:</p>
-<ul>
- <li>Der erste Teil verdeutlicht die grundlegenden Möglichkeiten von CSS, die in Mozilla Browsern und in den meisten anderen modernen Browsern funktionieren.</li>
-</ul>
-<ul>
- <li>Der zweite Teil beinhaltet einige Beispiele über spezielle Möglichkeiten, die in Mozilla Browsern funktionieren, aber nicht unbedingt von anderen Browsern unterstützt werden.</li>
-</ul>
-<p>Diese Einführung basiert auf der <a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 Spezifikation</a>.</p>
-<h4 id="An_wen_richtet_sich_dieses_Tutorial">An wen richtet sich dieses Tutorial?</h4>
-<p>Dieses Tutorial ist vorwiegend für Anfänger geschrieben, allerdings kann es auch für jemanden mit etwas Erfahrung hilfreich sein.</p>
-<p>Anfänger, die noch wenig über CSS wissen, sollten den ersten Teil dieses Tutorials lesen, um CSS zu verstehen und zu lernen wie man es benutzt. Danach bietet sich der zweite Teil an, um die Möglichkeiten in Mozilla Produkten kennen zu lernen.</p>
-<p>Fortgeschrittene, die schon etwas über CSS wissen, können einfach die Teile überspringen, die sie schon kennen und nur die Teile lesen, die sie interessiert.</p>
-<p>Fortgeschrittene, die Erfahrungen mit CSS haben, aber nichts über CSS in Mozilla wissen, sollten zum zweiten Teil springen.</p>
-<h4 id="Was_braucht_man_bevor_man_anfängt">Was braucht man bevor man anfängt?</h4>
-<p>Am Besten versteht man dieses Tutorial, wenn man die Beispiele direkt nachvollzieht. Benötigt wird dazu ein Editor für Textdateien und der Mozilla Firefox mit dem man grundlegend umgehen sollte.</p>
-<p>Ein weniger effektiver Weg ist es, das Tutorial einfach nur durchzulesen ohne selbst Dateien zu erstellen.</p>
-<p>Einige Teile dieses Tutorials benötigen unter Umständen die Mozilla Software. Diese Teile sind optional und können gegebenenfalls übersprungen werden.</p>
-<p><strong>Hinweis: </strong> CSS ermöglicht das Arbeiten mit Farben. Einige Teile dieses Tutorials sind von Farben abhängig. Diese Teile können nur benutzt werden, wenn ein Farbdisplay mit normalen Farbeinstellungen verfügbar ist.</p>
-<h4 id="Wie_man_dieses_Tutorial_benutzen_sollte">Wie man dieses Tutorial benutzen sollte</h4>
-<p>Um dieses Tutorial zu verwenden, sollten die Seiten sorgfältig und der Reihe nach, gelesen werden. Wird eine Seite ausgelassen, könnte es schwierig werden die nachfolgenden Seiten zu verstehen.</p>
-<p>Auf jeder Seite gibt es einen <em>Informationsbereich</em>, um zu verstehen wie CSS funktioniert und einen <em>Aktionsbereich</em>, um CSS auf dem eigenen Computer selbst auszuprobieren.</p>
-<p>Um das Wissen zu überprüfen, gibt es am Ende jeder Seite eine Aufgabe. Die Lösungen einiger Aufgaben ergeben sich aus den nachfolgenden Seiten des Tutorials.</p>
-<p>Damit man noch tiefer in CSS eintauchen kann, ist es sinnvoll die Hinweise unter <em>Weite Details</em> zu lesen und den Links zu folgen, die auf die CSS Spezifikation verweisen.</p>
-<h3 id="Erster_Teil">Erster Teil</h3>
-<p>Eine Schritt für Schritt Einführung in CSS:</p>
-<ol>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">Was ist CSS</a></li>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Warum CSS</a></li>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">Wie CSS funktioniert</a></li>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Kaskade und Vererbung</a></li>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selektoren</a></li>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Lesbares CSS</a></li>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Textformatierung</a></li>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Farbe</a></li>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Inhalt Boxen</a></li>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a></li>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a></li>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tabellen</a></li>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Medien</a></li>
-</ol>
-<h3 id="Zweiter_Teil">Zweiter Teil</h3>
-<p>Beispiele, die die Anwendung von CSS in Mozilla zeigen:</p>
-<ol>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_started/JavaScript" title="de/CSS/Einführung/JavaScript">JavaScript</a></li>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_started/XBL_bindings" title="de/CSS/Einführung/XBL_bindings">XBL bindings</a></li>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_started/CSS_in_XUL" title="de/CSS/Einführung/CSS_in_XUL">CSS in XUL</a></li>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_started/CSS_in_SVG" title="de/CSS/Einführung/CSS_in_SVG">CSS in SVG</a></li>
- <li><a href="/de/docs/Web/Guide/CSS/Getting_started/CSS_in_XML" title="de/CSS/Einführung/CSS_in_XML">CSS in XML</a></li>
-</ol>
diff --git a/files/de/web/guide/css/getting_started/kaskadierung_und_vererbung/index.html b/files/de/web/guide/css/getting_started/kaskadierung_und_vererbung/index.html
deleted file mode 100644
index 79ce577e7f..0000000000
--- a/files/de/web/guide/css/getting_started/kaskadierung_und_vererbung/index.html
+++ /dev/null
@@ -1,160 +0,0 @@
----
-title: Kaskadierung und Vererbung
-slug: Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung
-translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
-translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Wie CSS funktioniert.")}}<span class="seoSummary">Das ist der vierte Abschnitt des <a href="/de/docs/Web/Guide/CSS/Getting_Started" title="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er erklärt wie Stylesheets in einer Kaskade interagieren und wie Element den Style von ihren Elternelmenten erben können. Sie werden Vererbung verwenden, um eine Menge von Teilen in Ihrem Beispieldokument in einem Schritt zu verändern.</span></p>
-
-<h2 class="clearLeft" id="Information_Kaskadierung_und_Vererbung">Information: Kaskadierung und Vererbung</h2>
-
-<p>Der schlussendliche Style eines Elements kann an vielen verschiedenen Orten angegeben werden, die auf eine komplexe Art miteinander interagieren. Diese Komplexität macht CSS mächtig. Aber dadurch kann es auch verwirrend und schwer zu debuggen werden.</p>
-
-<p>Drei Hauptquellen von Styleinformationen bilden eine <em>Kaskade</em>. Diese sind:</p>
-
-<ul>
- <li>Die standardmäßigen Styles des Webbrowsers für die Markup Language.</li>
- <li>Die Styles, die vom Benutzer, der das Dokument liest, angegeben werden.</li>
- <li>Die Styles, die vom Autor mit dem Dokument verknüpft worden sind. Diese können an drei verschiedenen Orten angegeben werden:
-  <ul>
-   <li>In einer externen Datei: Dieses Tutorial diskutiert hauptsächlich diese Method zur Definition von Styles.</li>
-   <li>In einer Definition am Anfang des Dokumenst: Diese Methode sollte nur für Styles verwendet werden, die nur von dieser Seite benützt werden.</li>
-   <li>Auf einem bestimmten Element im Inhalt des Dokument: Das ist die am schwersten wartbare Methode, welche für Tests verwendet werden kann.</li>
-  </ul>
- </li>
-</ul>
-
-<p>Der Style des Benutzers verändert den standardmäßigen Style des Webbrowsers. Der Style des Autors des Dokuments verändert dann den Style ein weiteres Mal. In diesem Tutorial sind Sie der Autor des Beispieldokuments und es wird nur mit Stylesheets vom Autor gearbeitet.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Beispiel</div>
-
-<p>Wenn Sie dieses Dokument in einem Webbrowser lesen, kommen Teile des Styles, den Sie sehen, von dem standardmäßigen Style des Webbrowsers für HTML.</p>
-
-<p>Teile vom Style können von angepassten Webbrowsereinstellungen oder von einer angepassten Styledefinitionsdatei stammen. In Firefox können die Einstellungen im Preferences Dialog vorgenommen werden, oder Sie geben Styles in der Datei <code>userContent.css</code> innerhalb Ihres Browserprofils an.</p>
-
-<p>Andere Teile vom Style kommen aus Stylesheets, die vom Wiki-Server mit dem Dokument verlinkt werden.</p>
-</div>
-
-<p>Wenn Sie Ihr Beispieldokument in Ihrem Webbrowser öffnen, werden die {{ HTMLElement("strong") }} Elemente mit dickeren Buchstaben als der Rest des Textes dargestellt. Das kommt aus dem standardmäßigen Style des Webbbrowsers für HTML.</p>
-
-<p>Die {{ HTMLElement("strong") }} Elemente sind rot. Das kommt aus Ihrem Beispielstylesheet.</p>
-
-<p>Die {{ HTMLElement("strong") }} Elemente erben auch viele Eigenschaften vom Style des {{ HTMLElement("p") }} Elements, weil sie ein Kindelement davon sind. Auf dieselbe Art erbt das {{ HTMLElement("p") }} Element vom Style des {{ HTMLElement("body") }} Elements.</p>
-
-<p>Für Styles in der Kaskade haben die Stylesheets vom Autor höchste Priorität. Danach folgen die Stylesheets des Benutzers und der standardmäßige Stylesheet vom Webbrowser.</p>
-
-<p>Bei vererbten Styles haben die eigenen Styles von Kindelementen eine höhere Priorität als die von dessen Elternelementen.</p>
-
-<p>Das sind nicht alle Prioritäten, die angwendet werden. Folgende Seiten in diesem Tutorial gehen noch detaillierter darauf ein.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Mehr Details</div>
-
-<p>CSS ermöglicht es auch mit dem Schlüsselwort <code>!important</code> die Styles vom Autor zu überschreiben.</p>
-
-<p>Das bedeutet, dass ein Autor nicht immer genau vorhersehen kann, was genau die Leser sehen werden.</p>
-
-<p>Wenn Sie alle Details über Kaskadierung und Vererbung erfahren wollen, rufen Sie bitte die Seite <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> in der CSS Spezifikation auf.</p>
-</div>
-
-<h2 id="Aktion_Vererbung_verwenden">Aktion: Vererbung verwenden</h2>
-
-<ol>
- <li>Editieren Sie Ihre CSS Datei.</li>
- <li>Kopieren Sie die folgende Zeile in Ihre CSS Datei. Es macht dabei keinen Unterschied, ob Sie die Zeile vor oder nach der bereits enthaltenen Zeile einfügen. Es ist aber verständlicher die Zeile oben einzufügen, da das {{ HTMLElement("p") }} Element in Ihrem Dokument das Elternelement vom {{ HTMLElement("strong") }} Element ist:
-  <pre class="brush:css">p {
-  color: blue;
-  text-decoration: underline;
-}
-</pre>
- </li>
- <li>Laden Sie die Seite im Webbrowser erneut, damit die Änderung an Ihrem Beispieldokument sehen können. Die unterstreichende Line betrifft den gesamten Text im Absatz und somit auch alle Anfangsbuchstaben. Die {{ HTMLElement("strong") }} Elemente haben den Unterstrich von ihrem Elternknoten {{ HTMLElement("p") }} geerbt.<br>
-
-  <p>Die {{ HTMLElement("strong") }} Elemente sind aber immer noch rot. Die rote Farbe gehört zu ihrem eigenen Style und hat somit Priorität gegenüber dem blau des {{ HTMLElement("p") }} Elternelements.</p>
- </li>
-</ol>
-
-<h2 id="Before" name="Before">Davor</h2>
-
-<h3 id="HTML_Inhalt">HTML Inhalt</h3>
-
-<pre class="brush: html">&lt;p&gt;
-  &lt;strong&gt;C&lt;/strong&gt;ascading
-  &lt;strong&gt;S&lt;/strong&gt;tyle
-  &lt;strong&gt;S&lt;/strong&gt;heets
-&lt;/p&gt;
-</pre>
-
-<h3 id="CSS_Inhalt">CSS Inhalt</h3>
-
-<pre class="brush: css">strong {
-  color:red
-}
-</pre>
-
-<p>{{ EmbedLiveSample('Before') }}</p>
-
-<h2 id="After" name="After">Danach</h2>
-
-<h3 id="HTML_Inhalt_2">HTML Inhalt</h3>
-
-<pre class="brush: html">&lt;p&gt;
-  &lt;strong&gt;C&lt;/strong&gt;ascading
-  &lt;strong&gt;S&lt;/strong&gt;tyle
-  &lt;strong&gt;S&lt;/strong&gt;heets
-&lt;/p&gt;</pre>
-
-<h3 id="CSS_Inhalt_2">CSS Inhalt</h3>
-
-<pre class="brush:css" dir="rtl">p {
-  color:blue;
-  text-decoration:underline;
-}
-
-strong {
-  color:red;
-}</pre>
-
-<p>{{ EmbedLiveSample('After') }}</p>
-
-<p> </p>
-
-<div class="tuto_example">
-<div class="tuto_type">Herausforderung</div>
-Verändern Sie Ihren Stylesheet, damit nur die roten Buchstaben unterstrichen sind:
-
-<table style="border: 2px outset #36b; padding: 1em;">
- <tbody>
-  <tr>
-   <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Mögliche Lösung</div>
-
-<p>Verschieben Sie die Deklaration für die untersteichende Linie aus der Regel für {{ HTMLElement("p") }} in die für {{ HTMLElement("strong") }}. Die resultierende Datei sieht folgendermaßen aus:</p>
-
-<pre class="brush: css">p {
-  color: blue;
-}
-
-strong {
-  color: red;
-  text-decoration: underline;
-}
-</pre>
-
-<p> </p>
-<a class="hideAnswer" href="#challenge">Lösung ausblenden</a></div>
-<a href="#tutochallenge" title="Eine mögliche Lösung für die Herausforderung darstellen">Sehen Sie sich die Lösung an.</a></div>
-
-<p> </p>
-
-<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2>
-
-<p>{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selektoren")}}Ihr Beispielstylesheet definiert Styles für die Tags <code>&lt;p&gt;</code> und <code>&lt;strong&gt;</code>, um den Style der entsprechenden Elemente im gesamten Dokument zu verändern. Der nächste Abschnitt beschreibt, wie Sie den Style auf eine noch <a href="/de/docs/Web/Guide/CSS/Getting_Started/Selektoren" title="/de/docs/Web/Guide/CSS/Getting_Started/Selektoren">selektivere Art</a> angeben können.</p>
diff --git a/files/de/web/guide/css/getting_started/lesbares_css/index.html b/files/de/web/guide/css/getting_started/lesbares_css/index.html
deleted file mode 100644
index 4c16c3e18d..0000000000
--- a/files/de/web/guide/css/getting_started/lesbares_css/index.html
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: Lesbares CSS
-slug: Web/Guide/CSS/Getting_started/Lesbares_CSS
-translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
-translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Selektoren", "Selektoren")}}<span class="seoSummary">Das ist der sechste Teil des <a href="/de/docs/Web/Guide/CSS/Getting_Started" title="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er erklärt den Stil und die Grammatik der CSS Sprache selbst. Sie ändern das Layout Ihrer CSS Datei, damit sie lesbarer wird.</span></p>
-
-<h2 class="clearLeft" id="Information_Lesbares_CSS">Information: Lesbares CSS</h2>
-
-<p>Sie können Leerstellen und Kommentare in Ihren Stylesheets einfügen, um sie lesbarer zu machen. Wenn verschiedene Selektoren dasselbe Element nur auf verschiedene Arten auswählen und deren Regeln darauf angewendet werden, können Sie diese Selektoren im Stylesheet nacheinander gruppieren.</p>
-
-<h3 id="Leerstellen">Leerstellen</h3>
-
-<p>Leerstellen können Leerzeichen, Tabs und Leerzeilen sein. Sie können Leerstellen in Ihren Stylesheets einfügen, um sie lesbarer zu machen.</p>
-
-<p>Im Kontext eines Seitenlayouts und -zusammenstellung sind <strong>Leerstellen</strong> die Teile einer Seite, die frei bleiben: Seitenränder, Zwischenräume und Platz zwischen Spalten und beschriebene Zeilen.</p>
-
-<p>Ihre CSS Datei aus den Beispielen hat momentan eine Regel pro Zeile und fast nur das Minimum von Leerstellen. In einem komplexen Stylesheet würde diese Layout schwer zu lesen und somit auch schwer zu warten sein.</p>
-
-<p>Das gewählte Layout ist normalerweise eine persönliche Vorliebe. Doch wenn Ihre Stylesheets Teil eines gemeinsammen Projekts sind, könnten diese Projekte eigene Konventionen für das Layout haben.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Beispiele</div>
-
-<p>Einige Personen mögen das kompakte Layout, das wir bis jetzt verwendet haben, in dem eine Zeile nur geteilt wird, wenn sie sonst sehr lange sein würde:</p>
-
-<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;}
-</pre>
-
-<p>Einige Personen bevorzugen, wenn pro Zeile ein Property-Wert-Paar steht:</p>
-
-<pre class="brush: css">.carrot
-{
-color: orange;
-text-decoration: underline;
-font-style: italic;
-}
-</pre>
-
-<p>Einige Personen verwenden dann auch Einzüge — zwei oder vier Leerzeichen oder ein Tab sind gebräuchlich:</p>
-
-<pre class="brush: css">.carrot {
-  color: orange;
-  text-decoration: underline;
-  font-style: italic;
-}
-</pre>
-
-<p>Einige Personen richten alles vertikal an (aber solche Layouts sind schwer zu warten):</p>
-
-<pre class="brush: css">.carrot
-    {
-    color           : orange;
-    text-decoration : underline;
-    font-style      : italic;
-    }
-</pre>
-
-<p>Einige Personen verwenden verschieden viele Leerzeichen, um die Lesbarkeit zu verbessern.</p>
-
-<pre class="brush: css">.vegetable         { color: green; min-height:  5px; min-width:  5px }
-.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
-.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
-</pre>
-</div>
-
-<p>Einige Personen verwenden Tabs für das Layout, während andere nur Leerzeichen verwenden.</p>
-
-<h3 id="Kommentare">Kommentare</h3>
-
-<p>Kommentare in CSS beginnen mit <code>/*</code> und enden mit <code>*/</code>.</p>
-
-<p>Sie können Kommentare in Stylesheets für Anmerkungen verwenden oder auch Teile vorübergehend für Testzwecke <em>auskommentieren</em>.</p>
-
-<p>Um Teile eines Stylesheets auszukommentieren, platzieren Sie diesen Teil in einem Kommentar, damit der Webbrowser ihn nicht auswertet. Seien Sie mit dem Start und dem Ende eines Kommentars vorsichtig. Der Rest des Stylesheets muss weiterhin eine korrekte Syntax haben.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Beispiel</div>
-
-<pre class="brush: css">/* style for initial letter C in first paragraph */
-.carrot {
-  color:            orange;
-  text-decoration:  underline;
-  font-style:       italic;
-  }
-</pre>
-</div>
-
-<h3 id="Gruppierte_Selektoren">Gruppierte Selektoren</h3>
-
-<p>Wenn mehrere Elemente denselben Style haben, können Sie eine Gruppe von Selektoren getrennt mit einem Komma spezifizieren. Die Deklaration wird dann auf alle selektierten Elemente angewendet.</p>
-
-<p>An einer anderen Stelle in Ihrem Stylesheet können Sie einen einzelnen Selektor erneut spezifizieren, um zusätzlich individuelle Regeln dazu anzugeben.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Beispiel</div>
-
-<p>Diese Regel macht {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }} und {{ HTMLElement("h3") }} Elemente in derselben Farbe.</p>
-
-<p>Es ist angenehm die Farbe an nur einer Stelle zu spezifizieren, denn dann kann sie später einfacher verändert werden.</p>
-
-<pre class="brush: css">/* color for headings */
-h1, h2, h3 {color: navy;}
-</pre>
-</div>
-
-<h2 id="Aktion_Kommentare_hinzufügen_und_das_Layout_verbessern">Aktion: Kommentare hinzufügen und das Layout verbessern</h2>
-
-<ol>
- <li>Bearbeiten Sie Ihre CSS Datei und schreiben Sie die folgenden Regeln hinein (in beliebiger Reihenfolge):
-  <pre class="brush: css">strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-p {color: blue;}
-</pre>
- </li>
- <li>Machen Sie den Stylesheet lesbaren, in dem sie die Regeln in eine für Sie logische Reihenfolge bringen und Sie Ihrer Meinung nach sinnvolle Leerstellen und Kommentare einfügen.</li>
- <li>Speichern Sie die Datei und aktualisieren Sie Ihren Webbrowser, um sicherzustellen, dass Ihre Änderungen keinen Einfluss auf die Anwendung des Stylesheets haben:
-  <table style="border: 2px outset #36b; padding: 1em;">
-   <tbody>
-    <tr>
-     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-    </tr>
-    <tr>
-     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
- </li>
-</ol>
-
-<div class="tuto_details">
-<div class="tuto_type">Herausforderung</div>
-
-<p>Kommentiere Sie nur Teile Ihres Stylesheets aus, damit nur der allererste Buchstabe in Ihrem Dokument rot ist:</p>
-
-<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
- <tbody>
-  <tr>
-   <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-  </tr>
-  <tr>
-   <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<p>(Es gibt mehrere Wege dies zu erreichen.)</p>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Mögliche Lösung</div>
-Eine mögliche Lösung wäre das Auskommentieren der Regel <code>.carrot</code>:
-
-<pre class="brush: css">/*.carrot {
-  color: orange;
-}*/</pre>
-<a class="hideAnswer" href="#challenge">Lösung ausblenden</a></div>
-<a href="#tutochallenge" title="Eine mögliche Lösung für die Herausforderung darstellen">Sehen Sie sich die Lösung an.</a></div>
-
-<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2>
-
-<p>{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Textstyles", "Textstyles") }}Ihr Beispiel-Stylesheet verwendet kursiven und unterstrichenen Text. Die nächste Seite beschreibt weitere Wege, um <a href="/de/docs/Web/Guide/CSS/Getting_Started/Textstyles" title="/de/docs/Web/Guide/CSS/Getting_Started/Textstyles">das Aussehen von Text</a> in Ihrem Dokument zu spezifizieren<strong>.</strong></p>
diff --git a/files/de/web/guide/css/getting_started/selektoren/index.html b/files/de/web/guide/css/getting_started/selektoren/index.html
deleted file mode 100644
index f61b8bb577..0000000000
--- a/files/de/web/guide/css/getting_started/selektoren/index.html
+++ /dev/null
@@ -1,430 +0,0 @@
----
-title: Selektoren
-slug: Web/Guide/CSS/Getting_started/Selektoren
-translation_of: Learn/CSS/Building_blocks/Selectors
-translation_of_original: Web/Guide/CSS/Getting_started/Selectors
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Kaskadierung_und_vererbung", "Kaskadierung &amp; Vererbung")}}<span class="seoSummary">Das ist der fünfte Abschnitt des <a href="/de/docs/Web/Guide/CSS/Getting_Started" title="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er erklärt wie sie Styles selektiv anwenden können und wie verschiedene Arten von Selektoren verschiedene Prioritäten haben können. Sie fügen einige Attribute zu den Tags in Ihrem Beispiel-Dokument hinzu und Sie verwenden diese Attribute in Ihrem Beispielstylesheet.</span></p>
-
-<h2 class="clearLeft" id="Information_Selektoren">Information: Selektoren</h2>
-
-<p>CSS hat eine eigene Terminologie, die die CSS Sprache beschreibt. Früher in diesem Tutorial haben Sie eine Zeile wie die folgende geschrieben:</p>
-
-<pre class="brush: css">strong {
-  color: red;
-}
-</pre>
-
-<p>In der CSS Terminologie ist die gesamte Zeile eine <em>Regel</em>. Diese Regel beginnt mit <code>strong</code>, welches ein <em>Selektor</em> ist. Sie wählt aus, auf welche Elemente im DOM die Regel angewandt wird.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Mehr Details</div>
-
-<p>Der Teil innerhalb der geschwungenen Klammern ist die <em>Deklaration</em>.</p>
-
-<p>Das Schlüsselwort <code>color</code> ist eine <em>Eigenschaft (Property)</em> und <code>red</code> is ein <em>Wert (value)</em>.</p>
-
-<p>Das Semicolon nach dem Property-Value Pair trennt es von anderen Property-Value Pairs in derselben Deklaration.</p>
-
-<p>Dieser Tutorial bezeichnet einen Selektor wie <code>strong</code> als einen <em>Tag</em>-Selektor. Die CSS Spezifikation bezeichnet es als <em>Type</em>-Selector.</p>
-</div>
-
-<p>Diese Seite vom Tutorial geht detaillierter auf die Selektoren ein, die in CSS Regeln verwendet werden können.</p>
-
-<p>Zusätzlich zu Tagnamen können Werte von Attributen in Selektoren verwendet werden. Damit können Regeln spezifischer gemacht werden.</p>
-
-<p>Zwei Attribute haben einen speziellen Status in CSS. Diese sind <a href="/de/docs/Web/HTML/Global_attributes#attr-class" title="/de/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> und <a href="/de/docs/Web/HTML/Global_attributes#id" title="/de/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p>
-
-<h3 id="Class_Selektoren">Class Selektoren</h3>
-
-<p>Verwenden Sie das <a href="/de/docs/Web/HTML/Global_attributes#attr-class" title="/de/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> Attribut in einem Element, um das Element einer Klasse zuzuordnen. Der Name der Klasse ist frei wählbar. Mehrere Elemente in einem Dokument können denselben Wert für die Klasse haben.</p>
-
-<p>Tippen Sie einen Punkt direkt vor dem Klassennamen im Stylesheet, um die Klasse im Selektor zu verwenden.</p>
-
-<h3 id="ID_Selektoren">ID Selektoren</h3>
-
-<p>Verwenden Sie das <a href="/de/docs/Web/HTML/Global_attributes#id" title="/de/docs/Web/HTML/Global_attributes#id"><code>id</code></a> Attribut in einem Element, um dem Elemente eine ID zuzuweisen. Der Name der ID ist frei wählbar. Die ID muss innerhalb vom Dokument eindeutig sein.</p>
-
-<p>Tippen Sie eine Raute (Hash) direkt vor der ID im Styleshet, um die ID im Selektor zu verwenden.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Beispiel</div>
-Dieser HTML Tag hat ein <code>class</code> Attribut und ein <code>id</code> Attribute:
-
-<pre class="brush: html">&lt;p class="key" id="principal"&gt;
-</pre>
-
-<p>Der <strong>id</strong> Wert, <code>principal</code>, muss innerhalb vom Dokument eindeutig, aber andere Tags Dokument dürfen denselben K<strong>lassennamen</strong>, <code>key</code>, haben.</p>
-
-<p>In einem CSS Stylesheet macht diese Regel alle Elemente mit der class <code>key</code> grün. (Sie müssen dazu kein {{ HTMLElement("p") }} sein.)</p>
-
-<pre class="brush: css">.key {
-  color: green;
-}
-</pre>
-
-<p>Diese Regel macht das eine Element mit der <strong>id</strong> <code>principal</code> fettgedruckt:</p>
-
-<pre class="brush: css">#principal {
-  font-weight: bolder;
-}
-</pre>
-</div>
-
-<p>Wenn mehr als eine Regel auf ein Element zutreffen und dieselbe Eigenschaft spezifiziert wird, gibt CSS der Regel mit dem spezifischeren Selektor Priorität. Ein ID Selektor ist spezifischer als ein class Selektor, welcher wiederum spezifischer als ein tag Selektor ist.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Mehr Details</div>
-
-<p>Sie können Selektoren kombinieren, um einen selektiveren Selektor zu erstellen.</p>
-
-<p>Der Selektor <code>.key</code> zum Beispiel selektier alle Elements mit der Klasse <code>key</code>. Der Selektor <code>p.key</code> selektiert nur {{ HTMLElement("p") }} Elemente, die die Klasse <code>key</code> haben.</p>
-
-<p>Sie sind nicht auf die zwei speziellen Attribute <code>class</code> und <code>id</code> eingeschränkt. Mit eckigen Klammern können Sie auch andere Attribute spezifizieren. Der Selektor <code>[type='button']</code> zum Beispiel selektiert alle Elemente, die ein <code>type</code> Attribut mit dem Wert <code>button</code> haben.</p>
-</div>
-
-<p>Wenn ein Stylesheet Regeln mit einem Konflikt hat und und diese gleich spezifisch sind, dann gibt CSS der Regel, die später im Stylesheet ist, Priorität.</p>
-
-<p>Wenn Sie Probleme mit konfliktierenden Regeln haben, versuchen Sie eine Regel spezifischer zu machen, damit sie Priorität hat. Wenn Sie das nicht können, verschieben Sie eine der Regeln ans Ende des Stylesheet, damit sie Priorität bekommt.</p>
-
-<h3 id="Pseudo-classes_Selektoren">Pseudo-classes Selektoren</h3>
-
-<p>Eine CSS <a href="/de/docs/Web/CSS/Pseudo-classes" title="/de/docs/Web/CSS/Pseudo-classes">pseudo-class</a> ist ein Schlüsselwort, welches einem Selektor hinzugefügt wird. Damit kann ein bestimmter Zustand des selektierten Elements spezifiziert werden. {{ Cssxref(":hover") }} zum Beispiel wenden seinen Style an, wenn der Benutzer mit dem Mauszeiger über das selektierte Element fährt.</p>
-
-<p>Pseudo-classes zusammen mit pseudo-elements lassen Sie eine Style für ein Element nicht nur in Relation zum Inhalt vom Document Tree sondern auch in Relation zu externen Faktoren wie den Verlauf  der Navigation ({{ cssxref(":visited") }}, zum Beispiel), dem Zustand seines Inhalt (wie {{ cssxref(":checked") }} auf manchen form Elementen) oder der Position des Mauszeigers (wie {{ cssxref(":hover") }} das angibt, ob sich der Mauszeiger über dem Element befindet) anwenden. Eine vollständige Liste der Selektoren ist unter <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a> zu finden.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Syntax</div>
-
-<pre class="brush:css">selector:pseudo-class {
-  property: value;
-}
-</pre>
-</div>
-
-<h4 id="Liste_von_pseudo-classes">Liste von pseudo-classes</h4>
-
-<ul>
- <li>{{ Cssxref(":link") }}</li>
- <li>{{ Cssxref(":visited") }}</li>
- <li>{{ Cssxref(":active") }}</li>
- <li>{{ Cssxref(":hover") }}</li>
- <li>{{ Cssxref(":focus") }}</li>
- <li>{{ Cssxref(":first-child") }}</li>
- <li>{{ Cssxref(":nth-child") }}</li>
- <li>{{ Cssxref(":nth-last-child") }}</li>
- <li>{{ Cssxref(":nth-of-type") }}</li>
- <li>{{ Cssxref(":first-of-type") }}</li>
- <li>{{ Cssxref(":last-of-type") }}</li>
- <li>{{ Cssxref(":empty") }}</li>
- <li>{{ Cssxref(":target") }}</li>
- <li>{{ Cssxref(":checked") }}</li>
- <li>{{ Cssxref(":enabled") }}</li>
- <li>{{ Cssxref(":disabled") }}</li>
-</ul>
-
-<h2 id="Information_Selektoren_basieren_auf_Beziehungen">Information: Selektoren basieren auf Beziehungen</h2>
-
-<p>CSS hat einige Wege um Elemente basieren auf ihrer Bezieung zu anderen Eementen zu selektieren. Damit können Selektoren spezifischer gemacht werden.</p>
-
-<table id="relselectors">
- <caption>Gängige Selektoren basierend auf Beziehungen</caption>
- <tbody>
-  <tr>
-   <td style="width: 10em;"><strong>Selektor</strong></td>
-   <td><strong>Selektiert</strong></td>
-  </tr>
-  <tr>
-   <td><code>A E</code></td>
-   <td>Jedes E Element, das ein <em>Nachfolger</em> eines A Elements ist (das heißt: ein Kind oder ein Kind eines Kindes, <em>etc</em>.)</td>
-  </tr>
-  <tr>
-   <td><code>A &gt; E</code></td>
-   <td>Jedes E Element, das ein Kind eines A Elements ist</td>
-  </tr>
-  <tr>
-   <td><code>E:first-child</code></td>
-   <td>Jedes E Element, das das erste Kind seines Parent ist</td>
-  </tr>
-  <tr>
-   <td><code>B + E</code></td>
-   <td>Jedes E Element, das das nächste S<em>ibling</em> eines B Elements ist (das heißt: das nächste Kind von demselben Parent)</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Über eine Kombination der selektoren können komplexe Beziehungen ausgedrückt werden.</p>
-
-<p>Sie können auch das Symbol <code>*</code> (asterisk) verwenden, welches "jedes Element" bedeutet.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Beispiel</div>
-
-<p>Eine HTML Tabelle hat ein <code>id</code> Attribute aber die Zeilen und Zellen haben keinen eigenen Identifier:</p>
-
-<pre class="brush: html">&lt;table id="data-table-1"&gt;
-...
-&lt;tr&gt;
-&lt;td&gt;Prefix&lt;/td&gt;
-&lt;td&gt;0001&lt;/td&gt;
-&lt;td&gt;default&lt;/td&gt;
-&lt;/tr&gt;
-...
-</pre>
-
-<p>Diese Regeln machen die erste Zelle jeder Zeile fettgedruckt und die zweite Zelle jeweils monospaced. Sie betreffen nur eine bestimmte Tabelle im Dokument:</p>
-
-<pre class="brush:css">#data-table-1 td:first-child {
-  font-weight: bolder;
-}
-
-#data-table-1 td:first-child + td {
-  font-family: monospace;
-}
-</pre>
-
-<p>Das Ergebnis sieht so aus:</p>
-
-<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
- <tbody>
-  <tr>
-   <td>
-    <table style="margin-right: 2em; width: 18em;">
-     <tbody>
-      <tr>
-       <td><strong>Prefix</strong></td>
-       <td><code>0001</code></td>
-       <td>default</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type">Mehr Details</div>
-
-<p>Wenn Sie einen Selektor spezifischer machen, erhöhen Sie normalerweise seine Priorität.</p>
-
-<p>Wenn Sie diese Technik anwenden, können Sie es vermeiden vielen Tags in ihrem Dokument ein <code>class</code> oder ein <code>id</code> Attribut zu geben. Stattdessen erledigt CSS die Arbeit.</p>
-
-<p>In umfassenden Designs, bei denen Geschwindigkeit wichtig ist, können Sie ihre Stylesheets effizienter machen, indem Sie komplexe Regeln mit Beziehungen zu anderen Elementen vermeiden.</p>
-
-<p>Mehr Beispiele zu <a href="/de/docs/Web/Guide/CSS/Getting_Started/Tables" title="/de/docs/Web/Guide/CSS/Getting_Started/Tables">Tabellen</a> finden Sie auf der CSS Referenzseite.</p>
-</div>
-
-<h2 id="Aktion_class_und_ID_Selektoren_verwenden">Aktion: class und ID Selektoren verwenden</h2>
-
-<ol>
- <li>Bearbeiten Sie Ihre HTML Datei und duplizieren Sie den Absatz mit copy and paste.</li>
- <li>Danach setzen Sie ein <strong>id</strong> und <strong>class</strong> Attribut auf den ersten Absatz und ein <strong>id</strong> Attribut auf dem zweiten wie unten dargestellt. Alternativ können Sie die gesamte Datei kopieren und einfügen:
-  <pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-  &lt;meta charset="UTF-8"&gt;
-  &lt;title&gt;Sample document&lt;/title&gt;
-  &lt;link rel="stylesheet" href="style1.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p id="first"&gt;
-      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
-      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
-      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
-    &lt;/p&gt;
-    &lt;p id="second"&gt;
-      &lt;strong&gt;C&lt;/strong&gt;ascading
-      &lt;strong&gt;S&lt;/strong&gt;tyle
-      &lt;strong&gt;S&lt;/strong&gt;heets
-    &lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
- </li>
- <li>Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit:
-  <pre class="brush:css">strong {
-  color: red;
-}
-
-.carrot {
-  color: orange;
-}
-
-.spinach {
-  color: green;
-}
-
-#first {
-  font-style: italic;
-}
-</pre>
- </li>
- <li>Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen:
-  <table style="border: 2px outset #3366bb; padding: 1em;">
-   <tbody>
-    <tr>
-     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-    </tr>
-    <tr>
-     <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
-
-  <p>Sie können die Zeilen in Ihrer CSS Datei neu anordnen, um zu sehen, dass die Reihenfolge keine Auswirkungen hat.</p>
-
-  <p>Die class Selektoren <code>.carrot</code> und <code>.spinach</code> haben Priorität gegenüber dem tag Selektor <code>strong</code>.</p>
-
-  <p>Der ID Selektor <code>#first</code> hat Priorität gegenüber den class und den tag Selektoren.</p>
- </li>
-</ol>
-
-<div class="tuto_example">
-<div class="tuto_type">Herausforderungen</div>
-
-<ol>
- <li>Ohne die HTML Datei zu verändern, fügen sie eine einzige Regel in Ihrer CSS Datei hinzu, die die Farbe aller Anfangsbuchstaben wie jetzt beibehält aber alle anderen Buchstaben im zweiten Absatz blau macht:
-  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
-   <tbody>
-    <tr>
-     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-    </tr>
-    <tr>
-     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
- </li>
- <li>Ändern sie jetzt die neue Regel (ohne etwas anderes zu ändern), um den ersten Absatz auch blau zu machen:
-  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
-   <tbody>
-    <tr>
-     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-    </tr>
-    <tr>
-     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
- </li>
-</ol>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Mögliche Lösung</div>
-
-<ol>
- <li>Fügen Sie eine Regel mit dem ID Selektor <code>#second</code> und einer Deklaration <code>color: blue;</code> wie unten dargestellt hinzu:
-
-  <pre class="brush: css">#second {
-  color: blue;
-}
-</pre>
-  Ein noch spezifischerer Selektor <code>p#second</code> funktioniert auch.</li>
- <li>Ändern Sie den Selektor der neuen Regel auf <code>p</code>, damit er ein Tag-Selektor ist:
-  <pre class="brush: css">p {
-  color: blue;
-}
-</pre>
- </li>
-</ol>
-<a class="hideAnswer" href="#challenge">Lösung ausblenden</a></div>
-<a href="#tutochallenge" title="Eine mögliche Lösung für die Herausforderung darstellen">Sehen Sie sich die Lösung an.</a></div>
-
-<h2 id="Aktion_pseudo-classes_Selektoren_verwenden">Aktion: pseudo-classes Selektoren verwenden</h2>
-
-<ol>
- <li>Erstellen Sie eine HTML Datei wie folgt:
-  <pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-  &lt;meta charset="UTF-8"&gt;
-  &lt;title&gt;Sample document&lt;/title&gt;
-  &lt;link rel="stylesheet" href="style1.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
- </li>
- <li>Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit:
-  <pre class="brush: css">a.homepage:link, a.homepage:visited {
-  padding: 1px 10px 1px 10px;
-  color: #fff;
-  background: #555;
-  border-radius: 3px;
-  border: 1px outset rgba(50,50,50,.5);
-  font-family: georgia, serif;
-  font-size: 14px;
-  font-style: italic;
-  text-decoration: none;
-}
-
-a.homepage:hover, a.homepage:focus, a.homepage:active {
-  background-color: #666;
-}
-</pre>
- </li>
- <li>Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen (fahren sie mit dem Mauszeiger über den folgenden Link, um den Effekt zu sehen):
-  <table style="border: 2px outset #3366bb; padding: 1em;">
-   <tbody>
-    <tr>
-     <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td>
-    </tr>
-   </tbody>
-  </table>
- </li>
-</ol>
-
-<h2 id="Aktion_Selektoren_basierend_auf_Beziehungen_und_pseudo-classes_verwenden">Aktion: Selektoren basierend auf Beziehungen und pseudo-classes verwenden</h2>
-
-<p>Mit Selektoren basierung auf Beziehungen und pseudo-classes können Sie komplexe Algorithmen mit Kaskadierung erstellen. Das ist eine gängige Technik, um zum Beispiel <strong>reine CSS Dropdown Menüs</strong> zu erstellen (die nur aus CSS ohne <a href="/de/docs/Web/JavaScript" title="de/docs/Web/JavaScript">JavaScript</a> bestehen). Die Essenz dieser Technik ist die Erstellung einer Regel wie die folgende:</p>
-
-<pre class="brush: css">div.menu-bar ul ul {
-  display: none;
-}
-
-div.menu-bar li:hover &gt; ul {
-  display: block;
-}</pre>
-
-<p>Angewendet auf eine HTML Struktur wie die folgende:</p>
-
-<pre class="brush: html">&lt;div class="menu-bar"&gt;
-  &lt;ul&gt;
-    &lt;li&gt;
-      &lt;a href="example.html"&gt;Menu&lt;/a&gt;
-      &lt;ul&gt;
-        &lt;li&gt;
-          &lt;a href="example.html"&gt;Link&lt;/a&gt;
-        &lt;/li&gt;
-        &lt;li&gt;
-          &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
-          &lt;ul&gt;
-            &lt;li&gt;
-              &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
-              &lt;ul&gt;
-                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-              &lt;/ul&gt;
-            &lt;/li&gt;
-            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
-          &lt;/ul&gt;
-        &lt;/li&gt;
-      &lt;/ul&gt;
-    &lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;
-</pre>
-
-<p>Sehen sie in das komplette <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-basierte Dropdown Menü Beispiel</a> für mögliche Hinweise.</p>
-
-<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2>
-
-<p>Ihr Beispiel-Stylesheet sieht langsam kompakt und kompliziert aus. Der nächste Anschnit beschreibt die Wege, um <a href="/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS" title="/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS">CSS leichter lesbar</a> zu machen.{{nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS", "Lesbares CSS")}}</p>
diff --git a/files/de/web/guide/css/getting_started/textstyles/index.html b/files/de/web/guide/css/getting_started/textstyles/index.html
deleted file mode 100644
index 7a3a40f6e0..0000000000
--- a/files/de/web/guide/css/getting_started/textstyles/index.html
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: Textstyles
-slug: Web/Guide/CSS/Getting_started/Textstyles
-translation_of: Learn/CSS/Styling_text/Fundamentals
-translation_of_original: Web/Guide/CSS/Getting_started/Text_styles
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS", "Lesbares CSS")}}<span class="seoSummary">Das ist der siebte Teil des <a href="/de/docs/Web/Guide/CSS/Getting_Started" title="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er enthält weitere Beispiele für Textstyles. Sie verändern Ihren Stylesheet, um verschiedene Schriftarten zu verwenden.</span></p>
-
-<h2 class="clearLeft" id="Information_Textstyles">Information: Textstyles</h2>
-
-<p>CSS besitzt verschiedene Eigenschaften, um Text zu gestalten.</p>
-
-<p>Es gibt zur Gemütlichkeit eine Eigenschaft {{ cssxref("font") }}, mit der sich verschiedene Aspekte auf einmal definieren lassen, wie zum Beispiel:</p>
-
-<ul>
- <li>Fettgedruckt, kursiv und kleine Großbuchstaben</li>
- <li>Schriftgröße</li>
- <li>Zeilenhöhe</li>
- <li>Schriftart</li>
-</ul>
-
-<div class="tuto_example">
-<div class="tuto_type">Beispiel</div>
-
-<pre class="brush:css">p {
-  font: italic 75%/125% "Comic Sans MS", cursive;
-}
-</pre>
-
-<p>Diese Regel setzt verschiedene Eigenschaften der Schrift und macht alle Absätze kursiv.</p>
-
-<p>Die Schriftgröße wird auf drei Viertel der Größe jedes Absatzelements gesetzt und die Zeilenhöhe wird auf 125% (ein wenig größer als normal) gesetzt.</p>
-
-<p>Die Art der Schrift wird auf auf Comic Sans MS gesetzt. Wenn aber die Schriftart im Webbrowser nicht verfügbar ist, wird die standardmäßig kursiv (handgeschriebene) Art verwendet.</p>
-
-<p>Diese Regel hat den Nebeneffekt, dass alle dicken und kleinen Anfangsbuchstaben auf <code>normal</code> zurückgesetzt werden.</p>
-</div>
-
-<h3 id="Schriftarten">Schriftarten</h3>
-
-<p>Sie können nicht vorhersagen welche Schriftarten der Leser Ihres Dokument installiert hat. Deshalb ist es eine gute Idee eine Liste von Alternativen in bevorzugter Reihenfolge anzugeben.</p>
-
-<p>Beenden Sie die Liste mit einer eingebauten Standardschriftart: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> oder <code>monospace</code>.</p>
-
-<p>Wenn die Schriftart ein Feature des Dokuments nicht unterstützt, kann der Webbrowser eine andere Schriftart dafür auswählen. Das Dokument könnte zum Beispiel spezielle Zeichen enthalten, die von der Schriftart nicht unterstützt werden. Wenn der Webbrowser eine andere Schriftart finden kann, die diese Zeichen unterstützt, verwendet er diese.</p>
-
-<p>Um nur Schriftart anzugeben, können Sie die {{ cssxref("font-family") }} Eigenschaft verwenden.</p>
-
-<h3 id="Schriftgrößen">Schriftgrößen</h3>
-
-<p>Benutzer des Webbrowsers können die standardmäßige Schriftgröße überschreiben oder die Textgröße während dem Lesen ändern. Deshalb macht es überall wo es geht Sinn eine relative Größe zu verwenden.</p>
-
-<p>Sie können die bereits vordefinierten Werte wie <code>small</code>, <code>medium</code> und <code>large</code> verwenden. Sie können aber auch relative Werte zur Schriftgröße des Elternelements wie <code>smaller</code>, <code>larger</code>, <code>150%</code> oder <code>1.5em</code> verwenden. Ein "em" ist äquivalent zu der Breite des Buchstabens "m" (für die Schriftgröße des Elternelements). Damit sind <code>1.5em</code> eineinhalb Mal so groß als die Schrift im Elternelement.</p>
-
-<p>Wenn nötig können Sie eine genaue Größe wie <code>14px</code> (14 Pixel) für einen Bildschirm oder <code>14pt</code> (14 Punkt) für einen Drucker angeben. Das ist aber für Benutzer mit einer Sehbehinderung nicht zugänglich, da sie damit die Schriftgröße nicht mehr ändern können. Eine zugänglichere Strategie wäre, eine bereits vordefinierten Wert wie medium auf dem höchsten Element im Dokument zu setzen und dann relative Größen auf allen Kindelementen zu verwenden.</p>
-
-<p>Um nur die Schriftgröße anzugeben, können Sie die {{ cssxref("font-size") }} Eigenschaft verwenden.</p>
-
-<h3 id="Zeilenhöhe">Zeilenhöhe</h3>
-
-<p>Die Zeilenhöhe gibt den Abstand zwischen Zeilen an. Wenn Ihr Dokument lange Absätze über viele Zeilen hat, kann ein größerer Zeilenabstand als normal besonders bei einer kleinen Schriftgröße einfacher zum Lesen zu sein.</p>
-
-<p>Um nur die Zeilenhöhe anzugeben, können Sie die {{ cssxref("line-height") }} Eigenschaft verwenden.</p>
-
-<h3 id="Textdekoration">Textdekoration</h3>
-
-<p>Die separate {{ cssxref("text-decoration") }} Eigenschaft kann andere Styles wie <code>underline</code> oder <code>line-through</code> definieren. Sie können sie auf <code>none</code> setzen, um explizit jede Textdekoration zu entfernen.</p>
-
-<h3 id="Andere_Eigenschaften">Andere Eigenschaften</h3>
-
-<p>Um nur kursiv anzugeben, verwenden Sie  {{ cssxref("font-style") }}<code>: italic;</code><br>
- Um nur fettgedruckt anzugeben, verwenden Sie <code>{{ cssxref("font-weight") }}: bold;</code><br>
- Um nur kleine Großbuchstaben anzugeben, verwenden Sie  <code>{{ cssxref("font-variant") }}: small-caps;</code></p>
-
-<p>Um eine Eigenschaft einzeln abzuschalten, können Sie den Wert <code>normal</code> oder <code>inherit</code> angeben.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Mehr Details</div>
-
-<p>Sie können Textstyles auf viele andere Wege angeben.</p>
-
-<p>Einige der hier erwähnten Eigenschaften haben zum Beispiel andere Werte, die Sie auch verwenden können.</p>
-
-<p>Vermeiden Sie in einem komplexen Stylesheet die abgekürzte <code>font</code> Eigenschaft, da sie Nebeneffekte hat (setzt andere individuelle Eigenschaften zurück).</p>
-
-<p>Für alle Details von Eigenschaften, die mit Schriften zu tun haben, gehen Sie bitte auf <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> in der CSS Spezifikation. Die kompletten Details zur Textdekoration finden Sie unter <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p>
-
-<p>Wenn Sie nicht von den installierten Schriftarten auf dem System des Benutzers abhängig sein wollen, können Sie {{ cssxref("@font-face") }} verwenden, um einen Online Font anzugeben. Dazu muss der Webbrowser des Benutzers diese Regel aber auch unterstützen.</p>
-</div>
-
-<h2 id="Aktion_Schriftart_angeben">Aktion: Schriftart angeben</h2>
-
-<p>Für ein einfaches Dokument können sie eine Schrift auf dem {{ HTMLElement("body") }} Element angeben und der Rest des Dokuments erbt diese Regel.</p>
-
-<ol>
- <li>Bearbeiten Sie Ihre CSS Datei.</li>
- <li>Fügen sie die folgendene Regel hinzu, um die Schrift im gesamten Dokument zu bestimmen. Der Anfang der CSS Datei ist eine logische Stelle dafür, aber es hat auch an anderen Stellen in der Datei denselben Effekt:
-  <pre class="eval">body {
-  font: 16px "Comic Sans MS", cursive;
-}
-</pre>
- </li>
- <li>Kommentieren sie Regel und fügen Sie nach Ihrem Geschmak Zeilenumbrüche und Leerzeichen hinzu.</li>
- <li>Speichern Sie die Datei und aktualisieren Sie Ihren Webbrowser um die Änderung zu sehen. Wenn Sie die Schrift Comic Sans MS oder eine andere Schrift, welche kursiv nicht unterstützt, auf Ihren Computer haben, wählt Ihr Webbrowser eine andere Schriftart für den kursiven Text in der ersten Zeile aus:
-  <table style="border: 2px outset #36b; padding: 1em;">
-   <tbody>
-    <tr>
-     <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
-    </tr>
-    <tr>
-     <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
-    </tr>
-   </tbody>
-  </table>
- </li>
- <li>Wählen Sie <strong>Ansicht &gt; Schirftgröße &gt; Vergrößern</strong> (oder <strong>Ansicht &gt; Zoom &gt; Vergrößern</strong>) im Menü Ihres Webbrowsers aus. Obwohl Sie 16 Pixel im Sil angegeben haben, kann der Benutzer die Schriftgröße in der Ansicht ändern.</li>
-</ol>
-
-<div class="tuto_example">
-<div class="tuto_type">Herausforderung</div>
-
-<p>Machen Sie alle sechs Anfangsbuchstaben zweimal so groß in der serif Standardschrift vom Webbrowser ohne etwas anderes zu verändern:</p>
-
-<table>
- <tbody>
-  <tr>
-   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
-  </tr>
-  <tr>
-   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Mögliche Lösung</div>
-
-<p>Fügen Sie die folgende Style Deklaration zur <code>strong</code> Regel hinzu:</p>
-
-<pre class="brush: css">  font: 200% serif;
-</pre>
-Wenn Sie getrennte Deklarationen für <code>font-size</code> und <code>font-family</code> verwenden, dann wird die <code>font-style</code> Einstellung auf dem ersten Absatz <em>nicht</em> überschrieben.
-
-<p> </p>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="#tutochallenge" title="Eine mögliche Lösung für die Herausforderung darstellen">Sehen Sie sich die Lösung an.</a></div>
-
-<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2>
-
-<p>{{nextPage("/de/docs/Web/Guide/CSS/Getting_started/Farbe", "Farbe")}}Ihr Beispieldokument verwendet bereits verschiedene benannte Farben. Der <a href="/de/docs/Web/Guide/CSS/Getting_Started/Farbe" title="/de/docs/Web/Guide/CSS/Getting_Started/Farbe">nächste Teil</a> listet die Namen der Standardfarben auf und erklärt wie Sie eigene Farben definieren können<strong>.</strong></p>
diff --git a/files/de/web/guide/css/getting_started/was_ist_css/index.html b/files/de/web/guide/css/getting_started/was_ist_css/index.html
deleted file mode 100644
index 0641d048e4..0000000000
--- a/files/de/web/guide/css/getting_started/was_ist_css/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: Was ist CSS
-slug: Web/Guide/CSS/Getting_started/Was_ist_CSS
-translation_of: Learn/CSS/First_steps/How_CSS_works
-translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS
----
-<div>{{CSSTutorialTOC}}</div>
-
-<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Einführung")}} <span class="seoSummary">Das erste Kapitel von <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS für Einsteiger</a> erklärt kurz CSS. Sie werden in den nächsten Kapiteln ein simples Dokument zum Üben erstellen.</span></p>
-
-<h2 class="clearLeft" id="Was_ist_CSS">Was ist CSS</h2>
-
-<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> für "gestufte Gestaltungsbögen") ist eine Sprache, die definiert wie Dokumente dem Benutzer präsentiert werden.</p>
-
-<p>Ein <em>Dokument</em> ist eine Ansammlung von Informationen (Texte, Bilder, …), die mit einer <em>Auszeichnungssprache</em> <em>(Markup Language)</em> strukturiert werden. In der Auszeichnungssprache wird angegeben, dass ein Text beispielsweise als Überschrift oder als Link dargestellt werden soll. Es wird jedoch NICHT angegeben, WIE eine Überschrift oder ein Link dargestellt werden sollen. Das genau macht CSS.</p>
-
-<p>Ein solches Dokument einem Benutzer zu <em>präsentieren</em> bedeutet, es in einer lesbaren Form darzustellen. Browser wie Firefox, Chrome oder Internet Explorer sind dafür entworfen, Dokumente visuell zu präsentieren. Beispielsweise auf einem Computer Monitor, Beamer oder Drucker.</p>
-
-<div class="tuto_example">
-<p><strong>Beispiele</strong></p>
-
-<ul>
- <li>Eine Webseite, wie diese hier, ist ein Dokument.<br>
-  Die Information, die Sie auf einer Webseite sehen können, ist normalerweise mit der Auszeichnungssprache HTML (HyperText Markup Language) geschrieben.</li>
- <li>Auch Dialoge in einer Anwendung - auch Dialogfenster genannt - sind oft Dokumente. Solche Dialoge können auch mit einer Auszeichnugssprache, wie XUL (XML User Interface Language für XML Benutzeroberflächensprache), strukturiert sein. XML oder XUL sind also Beispiele für andere Auszeichungssprachen.</li>
-</ul>
-</div>
-
-<p>In dieser Anleitung gibt es Boxen mit der Beschriftung <strong>Weitere Details</strong>, wie sie unten zu sehen ist. Solche Boxen stellen weiterführende Informationen und Links zu einem Thema bereit. Lesen Sie sie, folgen Sie den Links oder überspringen Sie diese Boxen und lesen Sie sie später.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Weitere Details</div>
-
-<p>Ein Dokument ist nicht dasselbe wie eine Datei. Sie können aber selbstverständlich ein Dokument als Datei abspeichern.</p>
-
-<p><span style="line-height: 1.5;">Das Dokument, das Sie gerade lesen, ist nicht als Datei gespeichert. Wenn Ihr Browser diese Seite anfragt, durchsucht der Server eine Datenbank und generiert dieses Dokument indem er Teile daraus aus mehreren, verschiedenen Dateien zusammensetzt.</span></p>
-
-<p><span style="line-height: 1.5;">Sie werden dennoch in diesem Tutorial mit Dokumenten arbeiten, die in Dateien gespeichert sind.</span></p>
-
-<p>Weiterführende Infromationen über Dokumente und Auszeichnungssprachen finden Sie hier:</p>
-
-<table style="background-color: inherit; margin-left: 2em;">
- <tbody>
-  <tr>
-   <td><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></td>
-   <td>für Webseiten</td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/XML" title="/en-US/docs/XML">XML</a></td>
-   <td>allgemein für strukturierte Dokumente</td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></td>
-   <td>für Grafiken</td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a></td>
-   <td>für Userinterfaces in Mozilla</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Im Teil II dieses Tutorials werden Sie Beispiele für diese Auszeichnungssprachen sehen.</p>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type">Weitere Details</div>
-
-<p>In korrekter CSS-Terminologie wird das Programm, das ein Dokument darstellt <em>user agent (UA)</em> genannt. Ein Browser ist nur eine Art eines UA. CSS ist nicht nur für Browser oder Präsentationen interessant, aber im Teil I dieses Tutorials werden Sie nur mit CSS in einem Browser arbeiten.</p>
-
-<p>Für korrekte Definitionen der CSS-Terminologie sehen Sie unter <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definitions</a> in der CSS Spezifikation des World Wide Web Consortium (W3C) nach. Das ist eine internationale Gemeinschaft, die offene Standards für das Web definiert.</p>
-</div>
-
-<h2 id="Action_Ein_Dokument_erstellen">Action: Ein Dokument erstellen</h2>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-  &lt;meta charset="UTF-8"&gt;
-  &lt;title&gt;Sample document&lt;/title&gt;
-  &lt;/head&gt;
-
-  &lt;body&gt;
-    &lt;p&gt;
-      &lt;strong&gt;C&lt;/strong&gt;ascading
-      &lt;strong&gt;S&lt;/strong&gt;tyle
-      &lt;strong&gt;S&lt;/strong&gt;heets
-    &lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>{{ LiveSampleLink('Action_Ein_Dokument_erstellen', 'Schauen Sie sich die Demo an') }}</p>
-
-<ol>
- <li>Erstellen Sie einen neuen Ordner irgendwo auf Ihrem Computer, um die Übungen für dieses Tutorial abzuspeichern.</li>
- <li>Öffnen Sie einen Texteditor und erstellen Sie eine neue Textdatei. Diese Datei wird das Dokument für die nächsten Übungen enthalten.</li>
- <li>Kopieren Sie den folgenden HTML-Code in Ihre Datei, und speichern Sie diese unter dem Namen <code>doc1.html</code></li>
- <li>Öffnen Sie in Ihrem Browser ein neues Fenster oder einen neuen Tab und dann öffnen Sie darin die Datei, die Sie gerade gespeichert haben. Sie sollten dann folgenden Text mit fetten Anfangsbuchstaben sehen:</li>
-</ol>
-
-<table style="border: 2px outset #3366bb; padding: 1em;">
- <tbody>
-  <tr>
-   <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Möglicherweise sieht der Text in Ihrem Browser etwas anders aus als hier dargestellt. Das liegt daran, dass manche der Einstellungen in Ihrem Browser anders sein können, als wir sie hier verwendet haben. Das tut aber vorerst nichts zur Sache.</p>
-
-<h2 id="Was_nun">Was nun?</h2>
-
-<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Wofür CSS?")}}Ihr Dokument verwendet vorerst noch kein CSS. Im <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">nächsten Abschnitt</a> werden Sie CSS verwenden um die Darstellung Ihres Dokumentes zu verändern.</p>
diff --git a/files/de/web/guide/css/getting_started/why_use_css/index.html b/files/de/web/guide/css/getting_started/why_use_css/index.html
deleted file mode 100644
index 01933a9171..0000000000
--- a/files/de/web/guide/css/getting_started/why_use_css/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: Why use CSS?
-slug: Web/Guide/CSS/Getting_started/Why_use_CSS
-translation_of: Learn/CSS/First_steps/How_CSS_works
-translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS
----
-<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}Dieser zweite Teil des <span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> Tutorials erklärt die Beziehung zwischen CSS and Dokumenten. Im Beispiel werden Sie lernen, wie Sie ein CSS-Stylesheet Ihrem Dokument hinzufügen.</span></p>
-
-<h2 class="clearLeft" id="Warum_CSS">Warum CSS ?</h2>
-
-<p>Mithilfe von CSS definieren Sie Styles für Ihr Dokument. Das beinhaltet das Design, Layout und Varianten der Darstellung für verschiedene Geräte und Bildschirmgrößen. Sie können Ihr CSS direkt in den &lt;Kopfbereich&gt; (head) Ihres Dokumentes einbetten (<em>eingebettetes Stylesheet</em>) oder eine separate CSS-Datei mit Ihrem Dokument verknüpfen (<em>externes Stylesheet</em>). Dazu müssen Sie einfach einen Link auf Ihr Stylesheet in den &lt;Kopfbereich&gt; Ihres Dokumentes einbauen.</p>
-
-<p><span style="line-height: 16.7999992370605px;">Die Trennung von Inhalt und Form mithilfe eines</span> externen Stylesheets hat viele Vorteile:</p>
-
-<ul>
- <li>Sie müssen nicht alles doppelt und mehrfach tun</li>
- <li>Die Wartung wird vereinfacht</li>
- <li>Ein ganzer Webauftritt kann an einer zentralen Stelle umgestaltet werden.</li>
-</ul>
-
-<div class="tuto_example">
-<div class="tuto_type">Beispiel</div>
-
-<p>Mit CSS speichern Sie die Darstellungsinformationen in einer gemeinsamen Datei, die alle Seiten verwenden, die damit verknüpft sind. So können Sie beispielsweise die Farbe oder den Stil einer Überschrift für alle Ihre Webseiten ändern, die auf das selbe CSS-Stylesheet verlinken, indem Sie einfach einige wenige CSS-Attribute in diesem Stylesheet ändern.</p>
-
-<p>Wenn ein User eine Webseite betrachten will, lädt der Browser die Styleinformationen gemeinsam mit dem Inhalt der Seite.</p>
-
-<p>Wenn ein User eine Webseite drucken will, können Sie ihm unterschiedliche Stilinformationen für den Druck anbiete, sodass die ausgedruckte Seite schön gestaltet ist.</p>
-</div>
-
-<p>Wie arbeiten nun HTML und CSS zusammen? Generell kann man sagen: Verwenden Sie HTML um den Inhalt (content) Ihres Dokumentes zu beschreiben und CSS um die Form, den Darstellungsstil Ihrer Seite zu beschreiben und nicht ihren Inhalt. Etwas später werden Sie in diesem Tutorial auch Ausnahmen von dieser Regel kennenlernen.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">Weitere Details</div>
-
-<p>Auch eine Auszeichnungssprache wie HTML stellt Methoden zur Verfügung um einen Darstellungsstil zu definieren.</p>
-
-<p>Beispielsweise können Sie in HTML einen &lt;b&gt;Tag verwenden um Text <strong>fett</strong> darzustellen, oder Sie können die Hintergrundfarbe eines Dokumentes mithilfe des &lt;body&gt;Tags festlegen.</p>
-
-<p>Wenn Sie CSS verwenden vermeiden Sie üblicherweise diese Möglichkeiten der Auszeichnungssprache damit alle Styleinformationen Ihrers Dokumentes an einer Stelle beisammen bleiben.</p>
-</div>
-
-<h2 id="Action_Ein_CSS-Stylesheet_anlegen">Action: Ein CSS-Stylesheet anlegen</h2>
-
-<ol>
- <li>Erstellen Sie ein eneue Textdatei im selben Verzeichnis wo sie schon Ihr Dokument doc1.html abgelegt haben.</li>
- <li>Speichern Sie Ihre datei als: <code>style1.css</code>. Das wird nun Ihr Stylesheet.</li>
- <li>Kopieren Sie nachfolgende Zeile in Ihr neu erstelltes Stylesheet und speichern dieses.
-  <pre class="brush: css">strong {color: red;}
-</pre>
- </li>
-</ol>
-
-<h3 id="Verknüpfung_von_Dokument_und_Stylesheet">Verknüpfung von Dokument und Stylesheet</h3>
-
-<ol>
- <li>Um nun die beiden Dateien miteinander zu verknüpfen, bearbeiten Sie Ihre HTML Datei.  Fürgen Sie die unten hervorgehobene Zeile hinzu:
-  <pre class="brush: html; highlight:[6];">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-  &lt;meta charset="UTF-8"&gt;
-  &lt;title&gt;Sample document&lt;/title&gt;
-  &lt;link rel="stylesheet" href="style1.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p&gt;
-      &lt;strong&gt;C&lt;/strong&gt;ascading
-      &lt;strong&gt;S&lt;/strong&gt;tyle
-      &lt;strong&gt;S&lt;/strong&gt;heets
-    &lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
- </li>
- <li>Speichern Sie die HTML Datei und aktualisieren Sie Ihre Browserdarstellung (reload). Das Stylesheet hat die Initialien rot gefärbt:
-  <table style="border: 2px outset #3366bb; padding: 1em;">
-   <tbody>
-    <tr>
-     <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td>
-    </tr>
-   </tbody>
-  </table>
- </li>
-</ol>
-
-<p>{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}</p>
-
-<div class="tuto_example" id="challenge">
-<div class="tuto_type">Challenge</div>
-
-<p>Außer rot (red) erlaubt CSS noch andere Farbnamen.</p>
-
-<p>Versuchen Sie fünf weitere Farbnamen herauszufinen ohne in einem Referenzdokument nachzusehen.</p>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
-
-<h2 id="Was_nun">Was nun?</h2>
-
-<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "Wie CSS funktioniert.")}}Sie haben nun Ihr HTML-Dokument mit Ihrem separaten CSS-Stylesheet verknüpft. Als nächstes <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">lernen</a> Sie, wie Ihr Browser diese beiden kombiniert um das Dokument darzustellen.</p>
diff --git a/files/de/web/guide/css/getting_started/wie_css_funktioniert/index.html b/files/de/web/guide/css/getting_started/wie_css_funktioniert/index.html
deleted file mode 100644
index 8e980ce43c..0000000000
--- a/files/de/web/guide/css/getting_started/wie_css_funktioniert/index.html
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: Wie CSS funktioniert
-slug: Web/Guide/CSS/Getting_started/Wie_CSS_funktioniert
-translation_of: Learn/CSS/First_steps/How_CSS_works
-translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Warum CSS?") }}Dieser dritte Abschnitt des<span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> Tutorials erklärt wie CSS funktioniert, was im Browser damit passiert und welchen Zweck das Document Object Model (DOM) hat. Sie werden auch lernen Ihr Beispieldokument zu analysieren.</span></p>
-
-<h2 class="clearLeft" id="Wie_CSS_funktioniert">Wie CSS funktioniert</h2>
-
-<p>Wenn ein Browser ein Dokument darstellt, muss er den Inhalt des Dokuments mit den Stilinformationen kombinieren. Er bearbeitet das Dokument in zwei Schritten:</p>
-
-<ol>
- <li>Der Browser kombiniert die Auszeichnungssprache (HTML) und das CSS in das <a href="/en-US/docs/DOM" title="/en-US/docs/HTML/DOM"><em>DOM</em></a> (Document Object Model). Das DOM wird aus diesen beiden als Gesamtdokument im Computerspeicher abgelegt. Es kombiniert also Inhalt und Stil.</li>
- <li>Der Browser stellt den Inhalt des DOM dar.</li>
-</ol>
-
-<p>Eine Auszeichnungssprache verwendet <em>Elemente</em> um die Dokumentenstruktur darzustellen. Sie markieren Elemente mithilfe von <em>Tags</em>. Das sind Schlüsselworte zwischen zwei '&lt;' spitzen Klammern '&gt;'. Die meisten Elemente haben <em>paarweise Tags</em> - einen Start-Tag &lt;schluesselwort&gt; und einen End-Tag &lt;/schluesselwort&gt;, wobei das selbe Schlüsselwort verwendet wird, und das Endtag mit einem zusätzlichen '/' vor dem Schlüsselwort gekennzeichnet ist.</p>
-
-<p>Abhängig von der Auszeichnungssprache haben manche Elemente NUR ein Start-Tag. Solche Tags haben ein '/' nach dem Schlüsselwort. &lt;schluesselwort/&gt;.</p>
-
-<p>Ein Element kann auch andere Elemente innerhalb seines Start- und End-Tags enthalten. Man spricht dann auch von einem <em>Container</em>. Vergessen Sie niemals Tags innerhalb eines Containers auch wieder zu schließen!</p>
-
-<p>Ein DOM hat eine Baumstruktur. Jedes Element, Attribut und Textelement innerhalb der Auszeichnungssprache ist ein <em>Knoten</em> (node) innerhalb der Baumstruktur. Knoten sind durch Ihre Beziehung zu anderen DOM-Knoten charakterisiert. Manche Elemente sind Eltern von Kind-Knoten und Kind-Knoten haben Geschwister.</p>
-
-<p>Sie müssen das DOM verstehen, damit Sie Ihr CSS erstellen, debuggen und warten können, denn im COM kommen CSS und Dokumenteninhalt zusammen.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Beispiel</div>
-
-<p>In Ihrem Beispieldokument erzeugen der &lt;p&gt;-Tag und sein End-Tag &lt;/p&gt; einen Container:</p>
-
-<pre class="brush:html">&lt;p&gt;
-  &lt;strong&gt;C&lt;/strong&gt;ascading
-  &lt;strong&gt;S&lt;/strong&gt;tyle
-  &lt;strong&gt;S&lt;/strong&gt;heets
-&lt;/p&gt;
-</pre>
-
-<h2 id="Live_Beispiel">Live Beispiel</h2>
-
-<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p>
-
-<p>Im DOM, ist der entsprechende P-Knoten ein Eltern-Element. Seine Kinder sind die <small>STRONG</small>- und die nachfolgenden Knoten. Der <small>STRONG</small> Knoten sind ihrerseits wieder Eltern mit dem Text als ihre Kinder:</p>
-
-<pre><span style="color: black;">P</span>
-├─<span style="color: black;">STRONG</span>
-│ └─"<span style="color: black;">C</span>"
-├─"<span style="color: black;">ascading</span>"
-├─<span style="color: black;">STRONG</span>
-│ └─"<span style="color: black;">S</span>"
-├─"<span style="color: black;">tyle</span>"
-├─<span style="color: black;">STRONG</span>
-│ └─"<span style="color: black;">S</span>"
-└─"<span style="color: black;">heets</span>"</pre>
-</div>
-
-<h2 id="Action_Ein_DOM_analysieren">Action: Ein DOM analysieren</h2>
-
-<h3 id="Den_DOM_Inspector_verwenden">Den DOM Inspector verwenden</h3>
-
-<p>Um ein DOM zu analysieren, benötigen Sie eine spezielle Software. Dafür können Sie beispielsweise Mozilla's <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) Add-on verwenden. Sie brauchen sich nur das Add-on zu installieren (siehe unten).</p>
-
-<ol>
- <li>Verwenden Sie den Mozilla Browser um Ihr HTML-Beispieldokument zu öffnen .</li>
- <li>Wählen Sie <strong>Tools &gt; DOM Inspector</strong> aus der Menüleiste oder <strong>Tools &gt; Web Development &gt; DOM Inspector</strong>.
-  <div class="tuto_details">
-  <div class="tuto_type">Weitere Details</div>
-
-  <p>Wenn Ihr Mozilla Browser kein DOMi hat, können Sie ihn auf der <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">Add-ons Seite installieren</a> und den Browser neu starten. Setzen Sie dann mit dem Tutorial fort.</p>
-
-  <p>Wenn Sie DOMi nicht installieren wollen (oder Sie einen anderen Browser verwenden), dann können Sie Web X-Ray Goggles verwenden, wie wir Ihnen weiter unten erklären werden. Oder Sie können diesen Abschnitt auch überspringen.</p>
-  </div>
- </li>
- <li>In DOMi, expandieren Sie die Knoten in Ihrem Dokument indem Sie auf ihre Pfeile klicken.
-  <p><strong>Anmerkung:</strong> Leerzeichen in Ihrer HTML datei können in DOMi leere Text-Knoten hervorrufen. Diese können Sie einfach ignorieren.</p>
-
-  <p>Je nachdem welche Knoten Sie expandiert haben könnte ein  Teil des Ergebnisses so aussehen:</p>
-
-  <pre>│ ▼╴<span style="color: black;">P</span>
-│ │ │ ▼╴<span style="color: black;">STRONG</span>
-│ │ └<span style="color: darkblue;">#text</span>
-│ ├╴<span style="color: darkblue;">#text</span>
-│ ►╴<span style="color: black;">STRONG</span>
-│ │</pre>
-
-  <p>Wenn Sie einen Knoten auswählen, können Sie im Panel auf der rechten Seite von DOMi Details dazu sehen. So sehen Sie dort etwa den Text eines Text-Knotens.</p>
-
-  <p>Wenn Sie ein Element auswählen, analysiert DOMi dieses Element und zeigt Ihnen zahlreiche Informationen dazu im rechten Panel. Style Informationen sind ein Teil davon.</p>
- </li>
-</ol>
-
-<div class="tuto_example">
-<div class="tuto_type">Challenge</div>
-
-<p>Klicken Sie in DOMi auf einen <small>STRONG</small> Knoten.</p>
-
-<p>Benutzen Sie das rechte Panel von DOMi um herauszufinden wo die Farbe dieses Knotes auf rot gesetzt wird und wo die Schrift auf fett gesetzt wird.</p>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="#tutochallenge" title="Display a possible solution for the challenge">Lösung.</a></div>
-
-<h3 id="Web_X-Ray_Goggles">Web X-Ray Goggles</h3>
-
-<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a>zeigt weniger Information an als DOM Inspektor. Dafür ist es einfacher zu installieren und auch zu verwenden.</p>
-
-<ol>
- <li>Gehen Sie auf die Seite <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>.</li>
- <li>Ziehen Sie den Link für das Bookmarklet auf dieser Seite auf den Toolbar Ihres Browsers.</li>
- <li>Öffnen Sie Ihr HTML Dokument.</li>
- <li>Aktivieren Sie Web X-Ray Goggles indem Sie das Bookmarklet im Toolbar anklicken.</li>
- <li>Bewegen Sie Ihren Mauszeiger in Ihrem Dokument um seine Elemente zu sehen.</li>
-</ol>
-
-<h2 id="Was_nun">Was nun?</h2>
-
-<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading &amp; Inheritance") }}If you took the challenge, you saw that style information from more than one place interacts to create the final style for an element. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">next page</a> explains more about these interactions.</p>