---
title: Erste Schritte mit CSS
slug: Learn/CSS/First_steps
translation_of: Learn/CSS/First_steps
---
<div>{{LearnSidebar}}</div>

<p class="summary"><font>CSS (Cascading Style Sheets) wird zum Stylen und Layouten von Webseiten verwendet. Sie können beispielsweise die Schriftart, Farbe, Größe und den Abstand von Seiteninhalten ändern, Inhalt in mehrere Spalten aufteilen oder Animationen und andere dekorative Funktionen hinzufügen. Dieses Modul bietet einen sanften Einstieg in CSS, beginnend mit einem Überblick über Funktionsweise, Syntax und wie Sie mit CSS Darstellungsstile zu </font>HTML-Seiten <font>hinzufügen können.</font></p>

<div class="in-page-callout webdev">
<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>

<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>

<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
</div>

<h2 id="Voraussetzungen">Voraussetzungen</h2>

<p>Bevor Sie mit diesem Lernmodul beginnen, sollten Sie:</p>

<ol>
 <li>grundsätzlich mit Computern umgehen und das Internet passiv nutzen (d.h. im Internet surfen und Inhalte konsumieren) können.</li>
 <li>sich bereits eine einfache Arbeitsumgebung eingerichtet haben (wie in <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Notwendige Software installieren</a> beschrieben) und wissen, wie Sie Dateien erstellen und ordnen (wie in <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a> erklärt).</li>
 <li>über grundlegende HTML-Kenntnisse (entsprechend dem Lernmodul <a href="https://developer.mozilla.org/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML">Einführung in HTML</a>) verfügen.</li>
</ol>

<div class="note">
<p><strong>Hinweis</strong>: Wenn Sie an einem Computer/Tablet/Gerät arbeiten, auf dem Sie nicht die Möglichkeit haben, eigene Dateien zu erstellen, können Sie die meisten Code-Beispiele in einem Online-Editor wie <a href="http://jsbin.com/" rel="noopener">JSBin</a> oder <a href="https://thimble.mozilla.org/" rel="noopener">Thimble </a>ausprobieren.</p>
</div>

<h2 id="Lerneinheiten">Lerneinheiten</h2>

<p>Die Lerneinheiten dieses Moduls werden Ihnen alle grundlegenden Konzepte von CSS vermitteln. Dazu erhalten Sie auch immer wieder Gelegenheit, Ihr neu erworbenes Wissen gleich auszuprobieren.</p>

<dl>
 <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Was ist CSS?</a></dt>
 <dd>Mit <strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) können Sie toll aussehende Webseiten erstellen. Diese Lerneinheit gibt einen Vorgeschmack darauf anhand eines einfachen Code-Beispiels und erklärt einige Schlüsselelemente der Sprache.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS kennenlernen</a></dt>
 <dd>In dieser Lerneinheit wenden Sie CSS auf ein einfaches HTML-Dokument an und lernen dabei einige nützliche Dinge über die Sprache.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Wie CSS aufgebaut ist</a></dt>
 <dd>Nachdem Sie jetzt eine Vorstellung davon haben, was CSS ist und wie es benutzt wird, befassen wir uns etwas genauer mit dem Aufbau der Sprache. Diese Lerneinheit eignet sich auch gut zum Nachlesen, wenn Sie in späteren Abschnitten auf Verständnisschwierigkeiten stoßen.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Wie CSS funktioniert</a></dt>
 <dd>Bis jetzt haben wir uns damit beschäftigt, wie sich CSS nutzen lässt, um einfache <em>stylesheets</em> zu schreiben. In dieser Lerneinheit schauen wir uns, wie ein Browser CSS and HTML verarbeitet und in eine Webseite verwandelt.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Nutzen Sie Ihr neues Wissen</a></dt>
 <dd>Die Kenntnisse, die Sie sich in den vorherigen Lerneinheiten angeeignet haben, sollten es Ihnen erlauben, einfache Textseiten mit Hilfe von CSS zu formatieren. Hier erhalten Sie genau dazu Gelegenheit!</dd>
</dl>

<h2 id="See_also">See also</h2>

<dl>
 <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt>
 <dd>An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the <em>Introduction to CSS</em> module. Learn about styling HTML elements on a webpage, CSS selectors, attributes, and values.</dd>
</dl>