HTML-Styles

Sie können bereits Seitenstruktur bauen und mit Pfaden auf andere Dateien zeigen. Die nächste Anfängerfrage ist, wie man ändert, wie Inhalt aussieht: Textfarbe, Hintergrund und Größe. In frühen HTML-Übungen geht das mit dem style-Attribut. Es ist eine kleine Tür zu CSS-Ideen — nützlich für Demos und schnelle Experimente im Editor — während vollständiges Site-Design später in richtiges CSS auf Ihrem Lernweg wandert. So lernen Sie zuerst die Sprache der Eigenschaften, bevor Sie Stylesheets organisieren.

Was ist das style-Attribut?

Das style-Attribut lässt Sie CSS-Deklarationen direkt an das Start-Tag eines HTML-Elements hängen. Der Browser liest diese Deklarationen und zeichnet genau dieses Element danach. Sie erfinden keine zweite Sprache von Null: Sie schreiben kurze CSS-Regeln an einem Ort, den HTML bereits bereitstellt. Deshalb ist Inline-Style ein gutes Lehrwerkzeug, auch wenn professionelle Projekte selten das gesamte Design in Attributen belassen.

Direkte Antwort

Ergänzen Sie Aussehen mit style="property: value;" an einem Element. Einstiegs-Eigenschaften sind color (Textvordergrund), background-color (Bereich hinter dem Inhalt) und font-size (Textgröße). Setzen Sie die ganze Liste in Anführungszeichen. Trennen Sie mehrere Deklarationen mit Semikolons. Für echte mehrseitige Sites bevorzugen Sie eine CSS-Datei oder einen <style>-Block, damit Sie denselben Look nicht an jedem Tag wiederholen — in dieser Lektion konzentrieren Sie sich aber darauf, klare Inline-Deklarationen zu lesen und zu schreiben.

Eigenschaft und Wert, einzeln

Jede Deklaration hat eine Eigenschaft (was Sie ändern wollen) und einen Wert (wie es aussehen soll). Dazwischen steht ein Doppelpunkt. Anfänger sollten wenige Eigenschaften gut beherrschen, bevor sie eine riesige Liste auswendig lernen.

Das Beispiel lesen

• color: blue ändert nur die Textfarbe dieses Absatzes
• background-color: lightyellow färbt den Hintergrund hinter dem Text
• font-size: 24px setzt die Textgröße; px ist eine übliche Anfänger-Einheit
• Jeder Absatz hat sein eigenes style="...", damit die drei Effekte getrennt und leicht sichtbar bleiben
• Benannte Farben wie blue eignen sich zum Üben; später sehen Sie auch Hex-Werte wie #336699
  Wenn sich im Browser nichts ändert, prüfen Sie Speichern, Seitenaktualisierung und Anführungszeichen um den gesamten style-Wert.

Mehrere Deklarationen in einem Attribut

Sie können Deklarationen in einem einzigen style-Attribut kombinieren. Halten Sie die Liste kurz, damit HTML lesbar bleibt. Beenden Sie jede Deklaration mit einem Semikolon — auch ein abschließendes ist in Ordnung und oft klarer beim späteren Bearbeiten.

Warum dieses Muster zählt

• Ein Element kann Farbe, Hintergrund und Größe zusammen tragen
• Semikolons trennen die Deklarationen, damit der Browser jedes Paar parsen kann
• #f0f0f0 ist eine Hex-Farbe; für Anfänger optional, in echtem CSS aber üblich
• Der sichtbare Satz im Absatz ist normaler HTML-Text; nur das style-Attribut ändert das Aussehen
  Vermeiden Sie, am ersten Tag zehn Designentscheidungen in ein Attribut zu stopfen. Lernen Sie die Syntax zuerst mit zwei oder drei klaren Eigenschaften.

Style an verschiedenen Elementen

Das style-Attribut ist nicht auf p beschränkt. Überschriften, Spans und viele andere Elemente nutzen es genauso. So sehen Sie: Style folgt dem Element, an das Sie ihn hängen — nicht einem magischen globalen Schalter.

Worauf achten

• Die h1-Farbe stylt die Absätze nicht automatisch mit
• Der zweite Absatz kombiniert Hintergrund und Schriftgröße
• Inline-Style ist lokal: er wirkt auf dieses Element (und kann nach normalen CSS-Regeln Kinder beeinflussen — halten Sie Demos vorerst einfach)

Jetzt Inline-Style, später CSS

Inline-style ist schnell für Experimente. Es wird schmerzhaft, wenn zwanzig Seiten dieselbe marineblaue Überschrift brauchen und Sie zwanzig Attribute bearbeiten müssen. Gemeinsames CSS — ein <style>-Block im Dokumentkopf oder eine externe .css-Datei — hält Look-and-Feel an einem Ort und spart Wiederholung. Dieser Kurs enthält später eigenes CSS-Lernen. In dieser HTML-Sitzung ist Ihre Aufgabe, die Idee property:value zu verstehen und einige korrekte Inline-Beispiele zu schreiben, ohne Inline-Style als Endarchitektur für eine ganze Website zu behandeln. Betrachten Sie das Attribut als Übungsbrett, nicht als fertiges Designsystem.

Übung im Editor

1. Legen Sie eine Seite mit einem h1 und drei kurzen Absätzen an.
2. Geben Sie dem ersten Absatz eine Text-color.
3. Geben Sie dem zweiten eine background-color.
4. Geben Sie dem dritten eine Kombination aus color und font-size.
5. Optional färben Sie das h1 mit eigenem style.
6. Speichern und aktualisieren. Prüfen Sie, dass jeder Block anders aussieht.
7. Zerbrechen Sie absichtlich ein Beispiel (Anführungszeichen oder px entfernen), aktualisieren, den Fehler sehen, dann reparieren.
   Ein fehlgeschlagenes Style zu durchlaufen lehrt Anführungszeichen und Einheiten schneller als nur perfekte Samples zu kopieren.

Fehler, die Ihre Styles verstecken

• Anführungszeichen um den Wert vergessen: style=color:red ist in normaler HTML-Attributschreibweise ungültig
• color (Text) mit background-color (hinter dem Text) verwechseln und denken „Farbe hat nichts getan“
• Einheiten weglassen, wo Größe sie braucht (font-size: 24 statt 24px in vielen Anfängerfällen)
• Eine Textverarbeitung, die gerade Anführungszeichen durch typografische im Attribut ersetzt
• Ein ganzes Seitendesign in Inline-Styles stopfen statt als Nächstes gemeinsames CSS zu lernen
• Die Datei ändern, aber vor dem Aktualisieren nicht speichern — der Browser zeigt noch die alte Version

Zusammenfassung

• Das style-Attribut fügt CSS-Deklarationen an ein HTML-Element an
• Schreiben Sie property: value; und halten Sie die ganze Liste in Anführungszeichen
• Einstiegs-Eigenschaften: color, background-color, font-size
• Kombinieren Sie wenige Deklarationen mit Semikolons; halten Sie Demos kurz und lesbar
• Inline-Style ist hervorragend zum Lernen und für winzige Experimente, nicht zum Pflegen des Designs einer ganzen Site
• Gemeinsames CSS kommt auf dem Lernweg als Nächstes, wenn Sie Look-and-Feel an einem Ort steuern wollen
• Prüfen Sie immer mit Speichern + Aktualisieren, und kontrollieren Sie Anführungszeichen und Einheiten, wenn Styles „rätselhaft“ scheitern