Inline-Stile
Ändern Sie das Aussehen Ihrer Elemente direkt in HTML
Inline-Stile ist eine kostenlose HTML for Kids-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Hintergrundfarbe hinzufügen
Mit der Eigenschaft background-color können Sie Ihre Elemente hervorheben.
Beispiel:
<p style="background-color: yellow;">This text has a yellow background.</p>
Inline-Styles: Einfache Gestaltung für Ihr HTML
Willkommen bei der Lektion zu Inline-Styles! Heute lernen Sie, wie Sie Elemente direkt in Ihrem HTML mithilfe des Attributs style gestalten.
Was sind Inline-Styles?
Mit Inline-Styles können Sie CSS mithilfe des Attributs style direkt zu einem HTML-Tag hinzufügen. Dies ist die einfachste Möglichkeit, Ihre Seite zu gestalten.
Beispiel:
<p style="color: red;">This is red text!</p>
Mit color: red; wird die Textfarbe auf Rot geändert.
Schriftgröße ändern
Verwenden Sie die Eigenschaft font-size, um die Größe Ihres Textes zu ändern.
Beispiel:
<p style="font-size: 24px;">This text is 24 pixels large.</p>
Mehrere Styles kombinieren
Mit Inline-Styles können Sie mehrere CSS-Eigenschaften kombinieren. Trennen Sie jede Eigenschaft mit einem Semikolon ;.
Beispiel:
<p style="color: white; background-color: black; font-size: 18px;">
This text has multiple styles!
</p>
Andere Elemente gestalten
Inline-Styles funktionieren mit allen HTML-Elementen, zum Beispiel mit Überschriften, Schaltflächen und Bildern.
Beispiel:
<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: coral; color: white; padding: 10px;">
Styled Button
</button>
Probieren Sie es selbst aus
Erstellen wir eine Webseite mit Inline-Styles. Hier ist ein Beispiel für den Einstieg:
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<h1 style="color: purple;">Welcome to My Styled Page</h1>
<p style="color: gray; font-size: 16px;">
This is an example of inline styling.
</p>
<button style="background-color: lightblue; padding: 10px; border: none;">
Click Me!
</button>
</body>
</html>
Sehr gut!
Herzlichen Glückwunsch! Sie haben gelernt, wie Sie Inline-Styles verwenden, um Ihren HTML-Elementen eine einfache und wirkungsvolle Gestaltung zu verleihen. Inline-Styles eignen sich hervorragend für schnelle Änderungen. Wenn Ihre Webseite jedoch wächst, benötigen Sie fortgeschrittenere Gestaltungstechniken. In der nächsten Lektion sehen wir uns die Grundlagen von CSS an. Machen Sie sich bereit, professionelle Webseiten zu gestalten!
Das Attribut style verwenden
Was sind Inline-Styles?
Mit Inline-Styles können Sie CSS mithilfe des Attributs style direkt zu einem HTML-Tag hinzufügen. Dies ist die einfachste Möglichkeit, Ihre Seite zu gestalten.
Beispiel:
<p style="color: red;">This is red text!</p>
Mit color: red; wird die Textfarbe auf Rot geändert.
<p style="color: red;">This is red text.</p>
Häufig gestellte Fragen
Ist die Lektion „Inline-Stile“ kostenlos?
Ja — der vollständige Text von „Inline-Stile“ 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 „Inline-Stile“?
Ändern Sie das Aussehen Ihrer Elemente direkt in HTML 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 1 von 4.
Wie lange dauert die Lektion „Inline-Stile“?
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.