In der Redaktion: Das Design eines Steckbriefs
Im letzten Kapitel zu HTML Dokumenten hat die Setzerin Selina den Steckbrief von Harry Potter mit verschiedenen HTML Elementen, wie Überschriften, Absätzen, Aufzählungen,
Bildern oder Hyperlinks ausgestattet, sie hat sozusagen den Inhalt und die Struktur von Karlas geschriebenem Steckbriefs mit der Auszeichnungssprache HTML festgelegt.
Layouter Lars findet die Struktur gut, aber das Design dieses Steckbriefs mit Hintergrund, Schrift und so weiter findet er doch eher langweilig - das möchte er in diesem Kapitel ändern!
Um die Änderungen der Darstellung vorzunehmen, verwendet er die formale Sprache CSS (Cascading Style Sheets).
Aufgabe
Im Editor findest du ein neues Fenster oben links mit dem Titel Quelltext CSS.
(a) 💭 Experimentiere mit der Farbe, indem du die Farben white und black ersetzt, durch z.B. red, green, orange, purple oder viele mehr und beobachte was passiert.
(b) 💭 Experimentiere mit der Schriftgröße, indem du bei der Größe die Werte x-small, small, medium, large oder x-large testest und beobachtest was passiert.
Wie du siehst, kann man in dem CSS-Editorfenster die Darstellung, bzw. das Design, des Steckbriefs verändern.
CSS
Die formale Sprache CSS (Cascading Style Sheets) wird verwendet, um das Design eines Dokuments oder einer Webseite festzulegen.
Die Änderungen der Farbe oder der Schriftgröße werden hier immer auf das gesamte Dokument angewendet, jetzt möchtest du aber sicherlich verschiedene Absätze größer oder kleiner machen, oder nur die Schriftfarbe einer Überschrift verändern. Wie das geht, erfährst du auf der nächsten Seite.
