HTML for Kids · Lektion

CSS-Grundlagen

Eine Einführung in die Gestaltung mit CSS (optionaler Überblick)

CSS-Grundlagen ist eine kostenlose HTML for Kids-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML for Kids-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML for Kids-Kurs umfasst insgesamt 4 Lektionen.

CSS-Grundlagen: Einführung in die Gestaltung mit CSS

Willkommen in der Welt von CSS! Heute lernen Sie, wie Sie Cascading Style Sheets (CSS) verwenden, um Ihre Webseiten zu gestalten und ihnen ein ansprechendes Aussehen zu verleihen.

Was ist CSS?

CSS steht für Cascading Style Sheets. Es ist eine Sprache, mit der Sie das Erscheinungsbild Ihrer Webseiten steuern.

Mit CSS können Sie Farben, Schriftarten, Layouts und vieles mehr ändern!

So funktioniert CSS

CSS funktioniert, indem HTML-Elemente ausgewählt und auf sie Styles angewendet werden. Sie können CSS auf drei Arten verwenden:

Inline: Styles direkt in HTML-Elemente einfügen.
Intern: Styles in einem <style>-Tag im <head> einfügen.
Extern: Eine separate CSS-Datei verwenden.

In dieser Lektion konzentrieren wir uns auf interne und externe Styles.

Internes CSS

Internes CSS wird in einem <style>-Tag im <head>-Bereich Ihres HTML-Dokuments geschrieben.

Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightblue;
      }
      h1 {
        color: navy;
      }
      p {
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to CSS</h1>
    <p>This page has styles applied using internal CSS.</p>
  </body>
</html>

Externes CSS

Externes CSS wird in einer separaten Datei mit der Endung .css geschrieben. Sie verknüpfen diese Datei mithilfe des <link>-Tags mit Ihrem HTML-Dokument.

Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Welcome to External CSS</h1>
    <p>This page uses an external CSS file for styling.</p>
  </body>
</html>

Selektoren in CSS

Selektoren werden verwendet, um bestimmte HTML-Elemente für die Gestaltung auszuwählen. Zu den häufig verwendeten Selektoren gehören:

Tag-Selektor: Wählt alle Elemente mit einem bestimmten Tag aus. Beispiel: p.
Klassen-Selektor: Wählt Elemente mit einer bestimmten Klasse aus. Beispiel: .myClass.
ID-Selektor: Wählt ein Element mit einer bestimmten ID aus. Beispiel: #myID.

Sehen wir uns an, wie sie verwendet werden!

Klassen- und ID-Selektoren

Verwenden Sie eine Klasse, wenn Sie mehrere Elemente gestalten möchten. Verwenden Sie eine ID für ein einzelnes, eindeutiges Element.

Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .highlight {
        color: red;
        font-weight: bold;
      }
      #unique {
        color: blue;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <p class="highlight">This is highlighted text.</p>
    <p id="unique">This text is unique.</p>
  </body>
</html>

Probieren Sie es selbst aus

Erstellen wir eine Webseite mit internem CSS. Hier ist ein Beispiel für den Einstieg:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lavender;
        font-family: Arial, sans-serif;
      }
      h1 {
        text-align: center;
        color: darkmagenta;
      }
      p {
        color: gray;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Styled Page</h1>
    <p>This is an example of using internal CSS to style a page.</p>
  </body>
</html>

Sehr gut!

Herzlichen Glückwunsch! Sie haben die Grundlagen von CSS gelernt und erfahren, wie Sie damit Ihre Webseiten gestalten. CSS verleiht Ihren Seiten ein professionelles und ansprechendes Aussehen. In der nächsten Lektion beschäftigen wir uns ausführlicher mit Farben und Hintergründen, damit Ihre Seiten noch lebendiger wirken. Machen Sie sich bereit, Ihrer Kreativität freien Lauf zu lassen!

Häufig gestellte Fragen

Ist die Lektion „CSS-Grundlagen“ kostenlos?

Ja — der vollständige Text von „CSS-Grundlagen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML for Kids-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML for Kids-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „CSS-Grundlagen“?

Eine Einführung in die Gestaltung mit CSS (optionaler Überblick) Du übst HTML for Kids mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML for Kids zu starten?

Keine Vorkenntnisse erforderlich. HTML for Kids auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „CSS-Grundlagen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML for Kids-Lektion Code schreiben und ausführen?

Ja. Jede HTML for Kids-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu HTML for Kids