</> HTML lernenAIIT Angewandte Informatik · 1. Klasse · Lienz
Modul auswählen
  1. 01Start mit Visual Studio Code
  2. 02Absätze und Überschriften
  3. 03Text fett kursiv und durchgestrichen
  4. 04Listen Links und Bilder
  5. 05Tabellen mit sichtbarem Rahmen
  6. 06Ein YouTube Video einbetten
  7. 07CSS direkt im HTML
  8. 08Eine eigene CSS Datei
  9. 09Meine Hobbyseite fertig gestalten
  10. 10Klassen ganz einfach

Modul 7

CSS direkt im HTML

TAGESZIELIch kann mit einer style-Angabe die Farbe, Schriftgröße und den Hintergrund ändern.
Handout als PDF

HTML sagt, was ein Inhalt ist: Absatz, Überschrift, Bild oder Tabelle. CSS sagt, wie er aussieht. CSS direkt im Start-Tag heißt Inline-CSS. Die Rahmen deiner Tabelle und die Unterstreichung haben diese Möglichkeit schon verwendet.

Eine style-Angabe genau lesen

Im Start-Tag eines Elements kannst du style ergänzen. Die ganze Gestaltung steht zwischen Anführungszeichen. In style="color: navy;" sagt color, was du ändern möchtest: die Textfarbe. navy sagt, welche Farbe du möchtest: dunkelblau. Der Doppelpunkt verbindet Eigenschaft und Wert.

Nach einer Angabe folgt ein Semikolon. Danach kann die nächste Angabe kommen, zum Beispiel padding: 12px;. Schreibe alles innerhalb desselben style-Attributs. Die HTML-Tags und dein Text bleiben erhalten. Du ergänzt nur die Gestaltung des Elements.

Langsam verändern und vergleichen

Ändere zuerst nur eine Eigenschaft. Speichere und sieh dir die Seite an. Ändere danach den nächsten Wert. So erkennst du, welche Angabe welche Wirkung hat. padding ist zum Beispiel der freie Platz zwischen dem Text und dem Rand seines Bereichs.

Eine style-Angabe an einem Absatz betrifft diesen Absatz. Eine Schriftart am body wird normalerweise auch für seine Texte verwendet. Ergänze die Angaben am vorhandenen body-Start-Tag. Ein zweiter body ist dafür nicht nötig. Wähle dunkle Schrift auf einem hellen Hintergrund.

Im Attribut style stehen Eigenschaft und Wert. In color: navy; ist color die Eigenschaft und navy der Wert. Der Doppelpunkt trennt beide. Das Semikolon beendet die Angabe. Mehrere Angaben dürfen in derselben style-Zeichenkette stehen.

Die Bausteine

SchreibweiseBedeutung
color: navy;Textfarbe dunkelblau.
background-color: lightyellow;Hintergrundfarbe hellgelb.
font-size: 24px;Schriftgröße 24 Pixel.
font-family: Arial, sans-serif;Schriftart und Ersatzschrift.
text-align: center;Text zentrieren.
padding: 12px;Innenabstand zum Rand.

Inline-CSS an einzelnen Elementen

index.html · im body
<h1 style="color: navy;">Mein Hobby Robotik</h1>

<p style="font-size: 24px;">
  Ich baue kleine Roboter und probiere neue Ideen aus.
  Besonders gern teste ich, wie sie sich bewegen.
</p>

<p style="background-color: lightyellow; padding: 12px;">
  Beginne mit einer einfachen Aufgabe.
  Plane zuerst, was dein Roboter können soll.
  Teste danach immer nur eine Änderung auf einmal.
</p>

Für die ganze Seite kannst du den vorhandenen body-Start-Tag erweitern: <body style="font-family: Arial, sans-serif; background-color: lightblue;">. Erstelle keinen zweiten body. Wähle Farben, bei denen die Schrift gut lesbar bleibt.

Deine Aufgabe

Arbeite in deinem Ordner mein-hobby weiter. Bearbeite die Schritte der Reihe nach. Verwende dein eigenes Hobby und formuliere eigene Sätze. Speichere nach jedem größeren Arbeitsschritt und sieh dir das Ergebnis im Browser an.

  1. Öffne deine Hobbyseite und wähle zwei zusammenpassende Farben: eine dunkle Schriftfarbe und eine helle Hintergrundfarbe. Verwende zunächst Farbnamen aus dem Beispiel.
  2. Ergänze style an deiner h1 und ändere ihre Farbe. Speichere und betrachte nur diese erste Änderung im Browser, bevor du weiterarbeitest.
  3. Wähle den ersten Einführungsabsatz und setze font-size auf 24px. Vergleiche ihn mit den anderen Absätzen. Ändere den Wert danach einmal auf 20px und entscheide, was besser passt.
  4. Schreibe einen neuen Hinweis für Anfänger mit mindestens drei Sätzen. Gib diesem Absatz einen hellgelben Hintergrund und padding: 12px;. So wird aus deinem Text ein gut sichtbarer Hinweisbereich.
  5. Ändere am vorhandenen body-Start-Tag die Schriftart auf Arial und die Hintergrundfarbe auf einen hellen Farbton. Behalte alle vorhandenen Inhalte im body.
  6. Ergänze text-align: center; an einer passenden Überschrift. Lass längere Absätze linksbündig. Betrachte, wie sich die Lesbarkeit verändert.
  7. Lies deine Seite im Browser. Verbessere Farben, bei denen die Schrift schlecht zu erkennen ist. Beschreibe in einem neuen Absatz mit zwei Sätzen, warum du deine Farben gewählt hast.
Heute entsteht

Eine Seite mit bewusst gewählten Farben und einem hervorgehobenen Absatz.

Zum Abschluss

Kreuzworträtsel

Sechs Begriffe aus diesem Modul. Ein Kästchen steht für einen Buchstaben. Schreibe groß, ohne Leerzeichen: Ä = AE, Ö = OE, Ü = UE, ß = SS. Fülle das Rätsel auf deinem Handout aus.

Leeres Kreuzworträtsel für Modul 7; die nummerierten Hinweise folgen darunter.
Zum Vergrößern anklicken. Die Druckvorlage findest du im Abschlussblatt.

Waagrecht →

  • 2. Diese Eigenschaft des Textes ändert color. (5 Buchstaben)
  • 4. Dieses Zeichen trennt Eigenschaft und Wert. (11 Buchstaben)
  • 5. In diesem Attribut steht Inline-CSS. (5 Buchstaben)
  • 6. CSS-Eigenschaft für den Innenabstand. (7 Buchstaben)

Senkrecht ↓

  • 1. Dieses Zeichen beendet eine CSS-Angabe. (9 Buchstaben)
  • 3. In color: navy; ist navy der … (4 Buchstaben)

Abschlussblatt als PDF

Drei Abschlussfragen

  1. Erkläre color: navy; mit den Wörtern Eigenschaft und Wert.
  2. Was verändert padding an deinem Hinweisabsatz?
  3. Wie wählst du gut lesbare Farben?

Online-Quiz

Zehn Fragen, jeweils eine richtige Antwort. Klicke dich durch und erhalte am Ende deine Punkte mit kurzen Erklärungen. Keine Anmeldung nötig.

Online-Quiz starten · Modul 7