unslug de: move

4 files changed, 622 insertions, 0 deletions

diff --git a/files/de/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/de/conflicting/learn/css/building_blocks/values_and_units/index.html
new file mode 100644
index 0000000000..be9302eb6e
--- /dev/null
+++ b/files/de/conflicting/learn/css/building_blocks/values_and_units/index.html
@@ -0,0 +1,333 @@
+---
+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/conflicting/learn/css/first_steps/how_css_works/index.html b/files/de/conflicting/learn/css/first_steps/how_css_works/index.html
new file mode 100644
index 0000000000..01933a9171
--- /dev/null
+++ b/files/de/conflicting/learn/css/first_steps/how_css_works/index.html
@@ -0,0 +1,106 @@
+---
+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/conflicting/learn/css/first_steps/how_css_works_0e31d13696060558e208fc6c734ae400/index.html b/files/de/conflicting/learn/css/first_steps/how_css_works_0e31d13696060558e208fc6c734ae400/index.html
new file mode 100644
index 0000000000..8e980ce43c
--- /dev/null
+++ b/files/de/conflicting/learn/css/first_steps/how_css_works_0e31d13696060558e208fc6c734ae400/index.html
@@ -0,0 +1,123 @@
+---
+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>
diff --git a/files/de/conflicting/learn/css/first_steps/index.html b/files/de/conflicting/learn/css/first_steps/index.html
new file mode 100644
index 0000000000..9472041b96
--- /dev/null
+++ b/files/de/conflicting/learn/css/first_steps/index.html
@@ -0,0 +1,60 @@
+---
+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>