HTML-Stile
HTML ist standardmäßig nicht besonders ansprechend. Stile helfen, Inhalte attraktiver zu gestalten – sie ermöglichen es, Farben, Größen, Schriftarten und Layouts auf Elemente anzuwenden.
Verwendung von Inline-Stilen
Inline-Stile werden direkt auf ein HTML-Element mit dem style-Attribut angewendet. Das ist eine schnelle Lösung für einzelne Elemente, aber nicht empfohlen für größere Projekte.
Code-Details
<p style="color: red;">This text is red.</p>
<h1 style="font-size: 40px;">Large Heading</h1>
Vorschau
This text is red.
Stile mit dem <style>-Tag hinzufügen
Ein <style>-Block im <head>-Bereich eines HTML-Dokuments erlaubt es dir, interne CSS-Regeln zu definieren. Das ist nützlich, wenn du seitenweite Regeln ohne separate Datei erstellen möchtest.
Verwendung externer CSS-Dateien
Die beste Praxis ist es, Stile in einer separaten Datei zu organisieren und sie mit einem <link>-Tag im <head> zu laden. Das macht deinen Code sauberer und besser wiederverwendbar.
Häufig verwendete CSS-Eigenschaften
Zu den am häufigsten verwendeten CSS-Eigenschaften gehören Textfarbe (color), Schriftgröße (font-size), Schriftart (font-family) und Textausrichtung (text-align). Wer diese Grundlagen beherrscht, kann das Design deutlich verbessern.
Häufige Fehler bei der Verwendung von Stilen
Verwende nicht zu viele unterschiedliche Styling-Methoden auf derselben Seite. Denk daran, dass Inline-Stile externes CSS überschreiben und so die Wartung erschweren. Strebe immer nach Einfachheit und Konsistenz.
Wann sollte man welche Methode verwenden?
- Verwende Inline-Stile nur zum schnellen Testen oder in Ausnahmefällen.
- Der <style>-Block ist gut geeignet, wenn du mit einer einzelnen HTML-Datei arbeitest, z. B. beim Lernen.
- Für ernsthafte Projekte solltest du immer externe CSS-Dateien verwenden.
- Vermeide gemischte Styling-Ansätze – strebe Konsistenz im gesamten Projekt an.
Zusammenfassung
Stile bestimmen das Aussehen einer Webseite. Grundlegende HTML-Elemente können inline, über eingebettete Stilblöcke oder mit externen CSS-Dateien gestaltet werden. Die richtige Wahl führt zu sauberem, wartbarem Code.
Ziehe die richtige CSS-Zeile ein, die die Hintergrundfarbe auf Hellgrau setzt!
Code
<!DOCTYPE html>
<html>
<head>
<style>
body {
Ziehe das Element hierher
}
</style>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Antworten
Vorschau
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
