path: root/files/de/learn/getting_started_with_the_web/css_basics/index.html

---
title: CSS-Grundlagen
slug: Learn/Getting_started_with_the_web/CSS_basics
tags:
  - Anfänger
  - CSS
  - Coding
  - Design
  - Lernen
  - Stylesheets
  - Web
translation_of: Learn/Getting_started_with_the_web/CSS_basics
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>

<div class="summary">
<p>CSS (engl.: Cascading Style Sheets = gestufte Gestaltungsbögen) ist die Sprache, die Sie benutzen, um Ihre Webseite zu gestalten. <em>CSS Grundlagen</em> führt Sie durch die Grundlagen dieser Stylesheet-Sprache. Wir beantworten damit solche Fragen wie: »Wie kann ich die Farbe meines Textes ändern? Wie kann ich diesen Inhalt genau an einer bestimmten Stelle anzeigen lassen? Wie kann ich meine Webseite mit Hintergrundbildern und -farben versehen?«</p>
</div>

<h2 id="Was_ist_CSS_jetzt_wirklich">Was ist CSS jetzt wirklich?</h2>

<p>Wie HTML ist CSS nicht wirklich eine Programmiersprache. Es ist auch keine Markup-Sprache, sondern eine Stylesheet-Sprache, die es erlaubt für Elemente auf der Seite das Aussehen festzulegen. Zum Beispiel benötigt man folgengen CSS-Code, um alle Absätze (<code>&lt;p&gt;</code>) auszuwählen und deren Inhalt rot einzufärben:</p>

<pre class="brush: css">p {
  color: red;
}</pre>

<p>Probieren Sie es aus: Kopieren Sie diese drei Zeilen CSS in eine neue Datei in einen Texteditor und speichern Sie die Datei unter dem Namen <code>style.css</code> im Verzeichnis <code>styles</code>.</p>

<p>Aber wir müssen das CSS noch im HTML-Dokument verknüpfen, sonst würde die CSS-Datei von dem Browser nicht berücksichtigt. (Wenn Sie unserem Projekt nicht von Anfang an gefolgt sind, lesen Sie erst <a href="https://developer.mozilla.org/de/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a> und <a href="https://developer.mozilla.org/de/Learn/Getting_started_with_the_web/HTML_basics">HTML-Grundlagen</a>, um zu erfahren, was Sie davor tun müssen.)</p>

<ol>
 <li>Öffnen Sie die Datei <code>index.html</code> und fügen die folgende Zeile irgendwo in den Kopf (zwischen die <code>&lt;head&gt;</code>- und <code>&lt;/head&gt;</code>-Tags) ein:

  <pre class="brush: html">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
 </li>
 <li>Speichern Sie die Datei <code>index.html</code> und öffnen Sie diese in einem Browser. Es sollte wie in diesem Beispiel aussehen:</li>
</ol>

<p><img alt="Das Mozilla-Logo und ein paar Absätze. Der Text in den Absätzen ist rot gefärbt durch CSS." src="https://mdn.mozillademos.org/files/15471/beginner-css1-de.jpg" style="border: 1px solid grey; display: block; height: 832px; margin: 0px auto; width: 711px;">Wenn der Absatz jetzt rot ist: Herzlichen Glückwunsch! Sie haben nun zum ersten Mal Ihre eigene CSS-Datei geschrieben und eingebunden!</p>

<h3 id="Aufbau_einer_CSS-Regel">Aufbau einer CSS-Regel</h3>

<p>Lassen Sie uns nun das CSS von oben etwas genauer anschauen:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15467/css-example.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>

<p>Die ganze Struktur wird <strong>Regelsatz</strong> (oder oft nur »Regel«) genannt.</p>

<p>Jetzt zu den Namen der einzelnen Teile:</p>

<dl>
 <dt>Selektor</dt>
 <dd>Der HTML-Elementname steht direkt am Anfang der Regel. Er wählt die Elemente, die gestaltet werden sollen (in diesem Beispiel <code>p</code>) aus. Um ein anderes Element zu gestalten, muss man nur den Selektor ändern.</dd>
 <dt>Deklaration</dt>
 <dd>Eine einzelne Regel wie <code>color: red;</code> gibt an, welche <strong>Eigenschaft</strong> des Elements gestaltet werden soll.</dd>
 <dt>Eigenschaft (englisch: property)</dt>
 <dd>Art, auf die das ausgewählte HTML-Element gestaltet werden soll. (In diesem Fall ist <code>color</code> eine Eigenschaft des {{htmlelement("p")}} Elements.) In CSS wählen Sie aus, welche Eigenschaften Sie in der Regel setzen wollen.</dd>
 <dt>Eigenschafts-Wert (englisch: property value)</dt>
 <dd>Rechts neben der Eigenschaft, nach dem Doppelpunk, steht der <strong>Wert</strong> der Eigenschaft. Dieser gibt eine von vielen Möglichkeiten wieder, wie die Eigenschaft das Aussehen eines Elements verändern kann. (Es gibt viele andere Werte für <code>color</code> außer <code>red</code>).</dd>
</dl>

<p>Beachten Sie die anderen wichtigen Teile der Syntax! Die Syntax ist sozusagen die Grammatik des Codes:</p>

<ul>
 <li>Hinter dem Selektor stehen die zugehörigen Regelsätze innerhalb geschwungener Klammern (<code>{}</code>).</li>
 <li>Innerhalb einer Deklaration muss man einen Doppelpunkt (<code>:</code>) nutzen, um Eigenschaft und Wert zu trennen.</li>
 <li>Am Ende jeder Deklaration muss ein Semikolon (<code>;</code>) gesetzt werden.</li>
</ul>

<p>Um mehrere Eigenschaften eines HTML-Elements auf einmal zu verändern, trennt man die Deklarationen innerhalb eines Regelsatzes mit Semikolons, wie folgt:</p>

<pre class="brush: css">p {
  color: red;
  width: 500px;
  border: 1px solid black;
}</pre>

<h3 id="Mehrere_Elemente_auswählen">Mehrere Elemente auswählen</h3>

<p>Sie können auch mehrere Elemente auswählen, um einen einzigen Regelsatz auf diese alle anzuwenden. Schreiben Sie einfach mehrere Selektoren hintereinander, getrennt durch Kommas. So zum Beispiel:</p>

<pre class="brush: css">p,li,h1 {
  color: red;
}</pre>

<h3 id="Verschiedene_Arten_von_Selektoren">Verschiedene Arten von Selektoren</h3>

<p>Es gibt viele verschiedene Arten von Selektoren. Bisher haben wir nur <strong>Element-Selektoren</strong> genutzt, welche alle Elemente eines bestimmten Typs innerhalb eines HTML-Dokumentes auswählen. Aber wir können auch eine spezifischere Auswahl nutzen. Hier sind einige weitere Arten von Selektoren, welche häufig genutzt werden:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Selector name</th>
   <th scope="col">Was wird ausgewählt?</th>
   <th scope="col">Beispiel</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Element- Selektor (auch Tag- oder Typ-Selektor genannt)</td>
   <td>Alle HTML-Elemente eines bestimmten Typs.</td>
   <td>
    <p><code>p</code><br>
     Wählt alle <code>&lt;p&gt;-Elemente aus.</code></p>
   </td>
  </tr>
  <tr>
   <td>ID-Selektor</td>
   <td>Element mit der entsprechenden ID wird ausgewählt. (Eine ID kann immer nur einem einzigen Element innerhalb eines Dokuments zugeordnet werden)</td>
   <td>
    <p><code>#my-id</code><br>
     Wählt <code>&lt;p id="my-id"&gt;</code> oder <code>&lt;a id="my-id"&gt; aus.</code></p>
   </td>
  </tr>
  <tr>
   <td>Klassen-Selektor</td>
   <td>Element(e) mit der entprechenden Klasse werden ausgewählt. (Klassen können mehreren Elementen innerhalb eines Dokuments zugeordnet werden)</td>
   <td><code>.my-class</code><br>
    Wählt <code>&lt;p class="my-class"&gt;</code> und <code>&lt;a class="my-class"&gt; aus.</code></td>
  </tr>
  <tr>
   <td>Attribut-Selektor</td>
   <td>Element(e) mit entsprechendem Attribut werden ausgewählt.</td>
   <td><code>img[src]</code><br>
    Wählt <code>&lt;img src="myimage.png"&gt;</code> , aber nicht <code>&lt;img&gt; aus.</code></td>
  </tr>
  <tr>
   <td>Pseudoklassen-Selektoren</td>
   <td>Element(e) eines bestimmten Typs, welche sich in einem bestimmten Zustand befinden (z.B.: Mauszeiger ist über dem Element)</td>
   <td><code>a:hover</code><br>
    Wählt <code>&lt;a&gt; </code>nur  dann aus, wenn der Mauszeiger darüber bewegt wird.</td>
  </tr>
 </tbody>
</table>

<p>Es gibt viele weitere Selektoren. Sie können alle in folgender Liste finden: <a href="/de/docs/Web/Guide/CSS/Getting_started/Selectors">Selektoren</a>.</p>

<h2 id="Schriftart_und_Text">Schriftart und Text</h2>

<p>Jetzt, da wir uns einige CSS-Grundlagen angeschaut haben, lassen Sie uns damit anfangen, mehr Regelsätze und Eigenschaften zu unserer <code>style.css</code>-Datei hinzuzufügen. Zuerst ändern wir die Schrift, damit unser Text besser aussieht<code>.</code></p>

<ol>
 <li> In einem vorherigen Artikel haben Sie schon eine Schriftart von <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Schriftart">Google Fonts</a> ausgewählt, den zugehörigen Code sollten Sie schon irgendwo gespeichert haben. Fügen Sie das <code>&lt;link ... &gt;</code> Element in den Kopf Ihrer index.html Datei ein (zwischen den <code>&lt;head&gt;</code> und <code>&lt;/head&gt;</code> Tags). Das <code>&lt;link&gt;</code> Element sollte wie folgt aussehen:

  <pre class="brush: html">&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
 </li>
 <li>Löschen Sie die existierende Regel in Ihrer <code>style.css</code>-Datei. Es war ein guter Test, aber roter Text sieht doch nicht so schön aus.</li>
 <li>Fügen Sie stattdessen die folgenden Zeilen in die CSS-Datei ein. Ersetzen Sie 'Platzhalter' mit der Schriftart, welche Sie auf Google Fonts ausgewählt haben (<code>font-family</code> bedeutet soviel wie "Schriftfamilie" und deutet auf die Schriftarten, welche Sie benutzen möchten). Diese Regel setzt eine globale Schriftart (<code>font-family</code>) und Schriftgröße(<code>font-size</code>) für die ganze Webseite, da im <code>&lt;html&gt;</code>-Element alle anderen Elemente enthalten sind. Die Eigenschaften <code>font-family</code> und <code>font-size</code> werden an die Elemente innerhalb eines Elements weiter vererbt:
  <pre class="brush: css">html {
  font-size: 10px; /* px bedeutet 'pixels': die Schriftgröße wird auf 10 Pixel gesetzt  */
  font-family: Platzhalter; /* hier kommt der Name der ausgewählten Schriftfamilie hin */
}</pre>

  <div class="note">
  <p><strong>Hinweis:</strong> In einem Kommentar wurde hinzugefügt, was "px" bedeutet. Alles in einem CSS-Dokument, was zwischen <code>/*</code> und <code>*/</code> steht, ist ein <strong>CSS-Kommentar</strong>, welchen der Browser ignoriert. Kommentare sind für Sie selbst gedacht, hier können Sie für sich hilfreiche Notizen machen.</p>
  </div>
 </li>
 <li>Nun setzen wir die Schriftgröße für die textbeinhaltenden HTML-Elemente {{htmlelement("h1")}}, {{htmlelement("li")}} und {{htmlelement("p")}} fest. Wir zentrieren auch den Text von unseren Überschriften mit <code>text-align: center;</code> und ändern die Linienhöhe (<code>line-height</code>) und den Buchstabenabstand (<code>letter-spacing</code>), um den Text der <code>p</code> und <code>li</code> Elemente etwas lesbarer zu machen:
  <pre class="brush: css">h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}</pre>
 </li>
</ol>

<p>Sie können die Schriftgröße über den Wert vor 'px' ändern, wie Sie möchten. Ihre Webseite sollte jetzt ungefähr so aussehen:</p>

<p><img alt="Mozilla Logo und ein paar Absätze. Eine sans-serif Schrift wurde gesetzt, die Schriftgröße, Linienhöhe und Buchstabenabstand wurden angepasst und die Hauptüberschrift zentriert." src="https://mdn.mozillademos.org/files/15473/beginner-css2-de.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 711px;"></p>

<h2 id="Boxen_überall_Boxen_-_das_CSS_Box-Modell">Boxen, überall Boxen - das CSS Box-Modell</h2>

<p>Eine Sache, welche Sie bemerken werden, wenn Sie CSS-Code schreiben, ist, dass es sich oft um das Gestalten von Boxen dreht - Sie werden die Größe, die Farbe, die Position, usw. von Boxen bestimmen. Die meisten HTML-Elemente auf Ihrer Seite können als Boxen oder Schachteln betrachtet werden, welche übereinander sitzen.</p>

<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>

<p>Es ist daher nicht überraschend, dass das CSS-Layout auf dem Box-Modell basiert. Jede Box, die einen Raum auf Ihrer Webseite einnimmt, hat folgende Eigenschaften:</p>

<ul>
 <li><code>padding</code>, der Innenabstand: das ist der Raum direkt um den Inhalt des Elements (z.B. direkt um einen Absatz &lt;p&gt; drumherum)</li>
 <li><code>border</code>, der Rahmen: eine Linie, welche direkt außerhalb des <code>padding</code> sitzt</li>
 <li><code>margin</code>, der Außenabstand: der Raum außerhalb des Rahmens</li>
</ul>

<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>

<p>Wir werden hier auch die folgenden Eigenschaften benutzen:</p>

<ul>
 <li><code>width</code>, die Breite eines Elements</li>
 <li><code>background-color</code>, die Farbe hinter dem Inhalt und <code>padding</code> des Elements</li>
 <li><code>color</code>, die Farbe des Inhaltes des Elements (meistens Text)</li>
 <li><code>text-shadow</code>, gibt dem Text innerhalb des Elements einen Schatten</li>
 <li><code>display</code>, Ändert die Darstellungsweise der Box (diese Eigenschaft werden wir uns später noch genauer anschauen)</li>
</ul>

<p>Lassen Sie uns nun unserem Beispiel etwas mehr CSS-Code hinzufügen! Fügen Sie die folgenden neuen Regeln am Ende Ihrer CSS-Datei ein. Haben Sie keine Angst mit den Werten zu experimentieren.</p>

<h3 id="Ändern_der_Hintergrundfarbe_für_die_ganzen_Seite">Ändern der Hintergrundfarbe für die ganzen Seite</h3>

<pre class="brush: css">html {
  background-color: #00539F;
}</pre>

<p>Dieser Regelsatz ändert die Hintergrundfarbe auf der ganzen Seite. Ändern Sie die Hintergrundfarbe in die, welche Sie sich ausgesucht haben,<a href="/de/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Hauptfarbe"> als Sie Ihre Webseite geplant haben.</a></p>

<h3 id="Dem_body_Form_geben">Dem body Form geben</h3>

<pre class="brush: css">body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}</pre>

<p>Jetzt widmen wir uns dem &lt;body&gt;-Element. Hier habe wir einige neue Deklarationen, lassen Sie uns diese genauer anschauen:</p>

<ul>
 <li><code>width: 600px;</code> — die Breite (engl.: width) des <code>&lt;body&gt;</code>-Elements wird auf 600 Pixel festgelegt.</li>
 <li><code>margin: 0 auto;</code> — Wenn man bei den Eigenschaften <code>margin</code> oder <code>padding</code> zwei Werte setzt, dann steht der erste Wert für den Abstand nach oben <strong>und</strong> nach unten (welcher in diesem Fall <code>0</code> ist) und der zweite Wert steht für den Abstand links <strong>und</strong> rechts von dem Element (in diesem Fall setzen wir den Wert auf <code>auto</code>, wodurch der vorhandene Platz auf beiden Seiten des Elements gleichmäßig aufgeteilt wird). <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">Man kann auch nur einen, drei oder vier verschiedene Werte benutzen, wie dies das Element beeinflusst können Sie in der Dokumentation nachlesen.</a></li>
 <li><code>background-color: #FF9500;</code> — dies setzt die Hintergrundfarbe des &lt;body&gt;-Elements. Hier wurde eine rötliche Farbe ausgewählt, aber Sie können gerne eine andere Farbe nehmen<code>.</code></li>
 <li><code>padding: 0 20px 20px 20px;</code> — für den Innenabstand haben wir vier Werte gesetzt, um etwas Raum um unseren Inhalt zu schaffen. Oben setzen wir keinen Abstand, aber auf der linken und rechten Seite, sowie unten setzen wir jeweils 20 Pixel. Die Werte werden in folgender Reihenfolge gesetzt: oben, rechts, unten, links.</li>
 <li><code>border: 5px solid black;</code> — dies setzt einen 5 Pixel starken, soliden, schwarzen Rahmen um unser Element.   </li>
</ul>

<h3 id="Positionierung_und_Design_der_Hauptüberschrift">Positionierung und Design der Hauptüberschrift</h3>

<pre class="brush: css">h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}</pre>

<p>Lassen Sie uns das {{htmlelement("h1")}}-Element stylen. Wenn Sie Ihre Webseite im Browser anschauen, werden Sie feststellen, das ein komischer Abstand oberhalb des <code>&lt;body&gt;</code>-Elements ist. Dies passiert, da <strong>Browser einige Eigenschaften automatisch stylen</strong>, auch wenn Sie selbst überhaupt kein CSS dafür geschrieben haben! Das klingt nach einem schlechten Verhalten seitens des Browsers, aber auch Webseiten, die gar keine Stylesheets haben, sollen lesbar bleiben. Um den automatischen Abstand beim <code>&lt;h1&gt;</code>-Element los zu werden haben wir das automatische Styling des Browsers überschrieben mit <code>margin: 0;</code> .</p>

<p>Als nächstes haben wir den oberen und unteren inneren Abstand der Überschrift auf 20 Pixel gesetzt (<code>padding: 20px 0;</code>) und dem Text dieselbe Farbe gegeben wie dem Hintergrund des <code>&lt;html&gt;</code>-Elements.</p>

<p>Eine interessante Eigenschaft ist <code>text-shadow</code>. Diese fügt dem Textinhalt eines Elements einen Schatten hinzu. Die vier Werte bedeuten:</p>

<ul>
 <li>Der erste Wert in Pixeln setzt den <strong>horizontalen Versatz</strong> des Schattens vom Text weg nach rechts - so weit fällt der Schatten: ein negativer Wert würde den Schatten nach links fallen lassen.</li>
 <li>Der zweite Wert setzt den <strong>vertikalen Versatz</strong> des Schattens in Pixeln. Der Schatten fällt so weit nach unten, ein negativer Wert würde den Schatten nach oben fallen lassen.</li>
 <li>Der dritte Wert setzt den Radius in Pixeln für den Bereich, in dem der Schatten verwischt ist. Ein größerer Wert hier bedeutet einen leichteren Schatteneffekt.</li>
 <li>Der vierte Wert setzt die <strong>Grundfarbe</strong> des Schattens.</li>
</ul>

<p>Auch hier können Sie mit den verschiedenen Werten experimentieren, um zu sehen was dabei heraus kommt.</p>

<h3 id="Das_Bild_zentrieren">Das Bild zentrieren</h3>

<pre class="brush: css">img {
  display: block;
  margin: 0 auto;
}</pre>

<p>Zuletzt werden wir das Bild auf unserer Seite zentrieren. Wir können das wieder mit <code>margin: 0 auto;</code> erreichen, allerdings müssen wir noch etwas anderes tun, damit dies funktioniert. Das <code>&lt;body&gt;</code>-Element ist ein Block bzw. eine Box, weswegen es ein <code>margin</code> und <code>padding</code> hat. Das <code>&lt;img&gt;</code>-Element ist ein <strong>Inline-Element</strong>, es wird nicht als Box angezeigt und hat kein <code>margin</code> oder <code>padding</code>. Um das Bild in ein <strong>Block-Element</strong> umzuwandeln, geben wir ihm einfach die folgende Deklaration: <code>display: block;</code>.</p>

<div class="note">
<p><strong>Hinweis:</strong> Wenn Sie <code>diplay: block;</code> jetzt noch nicht ganz verstehen, ist das nicht schlimm. Wenn Sie CSS mehr studieren, dann werden Sie auch den Unterschied zwischen Inline-Elementen und Block-Elementen verstehen. Mehr zu den Möglichen <code>display</code> Werten können Sie in unserer <a href="/de/docs/Web/CSS/display">Display Referenz</a> lesen.</p>
</div>

<h2 id="Zusammenfassung">Zusammenfassung</h2>

<p>Wenn Sie allen Anweisungen in diesem Artikel gefolgt sind, dann sollten Sie jetzt eine Webseite aussehen, die so aussieht (hier können Sie sich <a href="http://mdn.github.io/beginner-html-site-styled/">unsere Version</a> ansehen) :</p>

<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/15475/beginner-css3-de.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 711px;"></p>

<p>Falls Ihr Resultat nicht so aussieht, dann gehen Sie den Artikel noch einmal durch und versuchen Sie mögliche Fehler in Ihrem Code zu finden. Wenn Sie wirklich nicht weiter wissen, dann können Sie sich <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">unseren Code auf Github</a> ansehen.</p>

<p>Wir haben hier wirklich nur die Grundlagen von CSS gesehen. Um mehr CSS zu lernen gehen Sie zu unserem <a href="https://developer.mozilla.org/de/Learn/CSS">CSS Lernbereich</a>.</p>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>