initial commit

1 files changed, 105 insertions, 0 deletions

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
new file mode 100644
index 0000000000..f0b8dc7a7e
--- /dev/null
+++ b/files/de/web/guide/css/getting_started/why_use_css/index.html
@@ -0,0 +1,105 @@
+---
+title: Why use CSS?
+slug: Web/Guide/CSS/Getting_started/Why_use_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<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>