Das Design meines Steckbriefs
Im letzten Kapitel zu HTML Dokumenten haben wir den Steckbrief von Harry Potter mit verschiedenen HTML Elementen, wie Überschriften, Absätzen, Aufzählungen, Bildern oder Hyperlinks ausgestattet, wir haben sozusagen den Inhalt und die Struktur unseres Steckbriefs mit der Auszeichnungssprache HTML festgelegt.
Nun ist das Design dieses Steckbriefs mit Hintergrund, Schrift und so weiter doch eher langweilig - das wollen wir in diesem Kapitel ändern!
Um die Änderungen der Darstellung vorzunehmen, verwenden wir 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.
