Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Little Boxes – die HTML-Basics

Styling für Webseiten: die ersten CSS-Regeln

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der HTML-Text unserer Beispielwebseite lässt sich mit zwei einfachen CSS-Regeln gestalten. In diesem Film erklärt Ihnen Peter Müller, worauf Sie dabei besonders achten sollten.

Transkript

Das HTML für die einfache Beispielseite ist soweit fertig, die Kästchen sind gebaut, sozusagen. Höchste Zeit um zu sehen, welche Rolle CSS dabei spielt. Das Styling, die im HTML definierten Elemente bekommen ihr Aussehen, das sie im Augenblick haben. Wenn Sie das hier im Browser einmal betrachten, schnelldurchlauf.html. Die Überschrift ist ja schon relativ groß. Das bekommen Sie von einem Stylesheet, das im Browser eingebaut ist. HTML an sich hat kein Aussehen, es dient nur dazu, hier zu strukturieren und diese Kästchen zu bauen. CSS ist eine komplett eigene Sprache. In HTML gibt's jede Menge spitze Klammern. Und in CSS gibt es stattdessen geschweifte Klammern, wie Sie gleich sehen werden. Ich beginne zunächst hier, indem ich im head der Seite, also zwischen head und /head, hier einen Extrabereich schaffe, < style und da ein bisschen Zwischenrauf schaffe. Dann sieht der Browser alles, was hier zwischensteht, zwischen style und /style, das ist CSS, das ist die Stylingsprache, die Gestaltung für die Seite. Und dort geht es los, indem ich den Namen des Elementes hinschreibe, das ich gerne gestalten möchte. Das Erste ist die große Kiste überhaupt auf der Seite, das ist body. Ohne < und der Name ist body. Den schreibe ich einfach hin, mach eine Leerstelle, und jetzt brauche ich eine geschweifte Klammer, die ich hier auf dem Windows-Rechner bekomme ich die mit Alt Gr und 7 und 0, die beiden Klammern. Und auf dem Mac mit Alt 8 und Alt 9. So, hier ist also die geschweifte Klammer. Und da rein schreibe ich jetzt background, ich möchte die Hintergrundfarbe gestalten. background und dann sehen Sie hier schon color, dann brauche ich das gar nicht fertig zu schreiben. Und dort kommt jetzt die Farbangabe, das ist ein bisschen seltsam, machen Sie sich da noch nicht zu viele Gedanken drüber. Mit einem Doppelkreuz beginnt es fff8e7. Das ist so' n heller Beigeton. Dann kommt ein Semikolon (;) und dann wird die Klammer wieder geschlossen. So, die geschweifte Klammer wieder zu. Das ist hier body, ist der Name des Elementes, geschweifte Klammer auf und jetzt, wenn die geschlossene da ist, werden die beiden hervorgehoben im Editor. Background color, Hintergrundfarbe und das ist ein Hexadezimalwert, beginnt mit einem Doppelkreuz, einer Raute fff8e7. Das sind die Farben rot, grün und blau in Hexadezimalen. Jetzt speichere ich das Ganze. Da oben ist ein Punkt, das heißt, hier ist etwas noch nicht gespeichert. Ich speichere das einmal und gehe in den Browser und lade hier die Seite neu. Und Sie sehen, hier ist jetzt ein beigefarbener Hintergrund. Der Browser versteht das, weil das ist CSS hier im Editor. So, da ist es eingefügt, ein bisschen übersichtlicher. Jetzt möchte ich das nächste Element gestalen und dazu nehme ich die Überschrift und die heißt h1. Gestalte das h1 Element auf der Seite. So, und das Klammerpärchen setze ich hier gleich mal so hin. Und das soll auch eine Farbe bekommen, aber noch ein bisschen mehr. Ich gehe hier mal in die nächste Zeile. Denn wenn man mehr als eine Zeile hat, dann kann man das besser Zeile für Zeile aufteilen und gebe als Farbe mal ein Wort darkred und Semikolon (;) am Ende. So, das ist die Hintergrundfarbe für die Überschrift. Wieder speichern, wieder rüber, wieder neu laden und Sie sehen, das klappt. Das Element geht tatsächlich von ganz links bis ganz rechts, ist dunkelrot eingefärbt, aber jetzt müsste die Schriftfarbe noch auf Weiß sehen. Die Schriftfarbe heißt color in CSS. Doppelpunkt (:) und dann schreibe ich einfach mal white;, speichern, rüber in den Browser, neu laden und schon ist die Schrift weiß. Das ist ganz wunderbar, aber jetzt muss hier noch ein bisschen Luft drum rum, damit es nicht so ganz am Rand klebt. Also zurück in den Editor und "Luft drum rum" heißt auf CSS padding:8 Pixel nehmen wir mal, einfach zum Ausprobieren. Damit kann man ein bisschen rumspielen und das ändern, wenn das noch nicht gut ist, aber acht Pixel sieht gar nicht so schlecht aus. Sie sehen also hier die Überschrift ist jetzt schon gestaltet, der body ist gestaltet und der Absatz ist nach wie vor von uns ungestaltet, er wird nach wie vor vom eingebauten Browser-Stylesheet formatiert. So, die Abstände hier zwischen, die sind im Moment noch nicht manipulierbar, das geht später mit CSS relativ einfach, aber im Moment versuchen wir das noch gar nicht, es reicht im Moment, hier h1 hat eine dunkelrote Hintergrundfarbe und der Absatz ist darunter und body an sich hat einen beigefarbenen Hintergrund.

Little Boxes – die HTML-Basics

Sehen Sie, wie HTML und CSS funktionieren und lernen Sie die dabei die unabdingbaren Grundlagen der Webprogrammierung kennen.

3 Std. 3 min (41 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:11.03.2015
Aktualisiert am:28.09.2016
Laufzeit:3 Std. 3 min (41 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!