---
title: Was ist CSS
slug: Learn/CSS/First_steps/How_CSS_works
translation_of: Learn/CSS/First_steps/How_CSS_works
translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS
original_slug: Web/Guide/CSS/Getting_started/Was_ist_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>