Little Boxes – der HTML-Crashkurs

CSS zum Ausprobieren: die W3C Core Styles

Testen Sie unsere 1862 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das W3C hat vor vielen Jahren acht einfache Stylesheets erstellt, mit denen man zu Übungs- oder Demonstrationszwecken Webseiten per CSS formatieren kann, ohne selbst CSS schreiben zu müssen.

Transkript

Der HTML Crash Kurs mit einem Überblick über die Funktionsweise von HTML und die wichtigsten Elemente mit den wichtigsten Einstellungen neigt sich dem Ende, aber ich möchte Ihnen zumindest einen kleinen Vorgeschmack auf CSS geben zum Gestalten von HTML-Elementen dieses Quelltextes hier. Denn so ist es ein bisschen sehr schlicht und wie CSS funktioniert, kann man mit den W3C Core Styles einmal sehen. Die W3C Core Styles, hier gibt es bei der Adresse w3.org/StyleSheets mit zwei großen S, /Core. Und da gibt es eine deutsche Übersetzung, die hier ist und bieten die Core Styles, also die Kernformatvorlagen, bieten Autoren eine einfache Möglichkeit, Stylesheets zu verwenden. Die liegen seit vielen, vielen Jahren hier unten, seit 1997 von Bert Boss, von einem der Erfinder von CSS, liegen die hier auf den Servern und können einen ersten Eindruck davon vermitteln, was CSS kann, ohne dass sie aus nur selbst eine einzige Zeile CSS schreiben müssen. Es gibt hier acht Stylesheets mit den schönen Namen Chocolate, Midnight, Modernist, Oldstyle, Steely, Swiss, Traditional und Ultramarine. Diese Stylesheets können Sie direkt verlinken in Ihrer HTML-Datei. Ich kopiere hier einfach mal den Link. Das Element heißt wirklich link zum Verbinden, zum Verknüpfen. Und hier ist die Adresse zum w3 StyleSheets/Core/Modernist/ Den Rest hier brauchen ... type="text" brauchen Sie in HTML 5 nicht mehr. Ich habe nur diesen Teil kopiert, gehe rüber in den Editor und füge ihn hier ein. So, jetzt muss ich den nur noch schließen. Und kopiere die ganze Zeile noch einmal und füge die auch auf der Kontaktseite ein. Seitenliste anzeigen, ich öffne hier die Kontaktseite und füge das auch hier ein. Machen das ein bisschen sauber und speichern auch die ab. Jetzt wird also das HTML auf diesen beiden Seiten wird fomatiert per Fernsteuerung durch ein Stylesheet vom W3C. So, ich lade die Seite neu und Sie sehen den Unterschied. Das ist alles ein bisschen eingerückt, hier ist farblicher Hintergrund hinter den Links. Die Adressen unten sind gesperrt gedruckt und nicht mehr kursiv. Das ist doch schon eine leichte Änderung. So, und auf der Kontaktseite dasselbe. Auch hier sieht es aus, beide Seiten werden quasi per Fernsteuerung gestaltet. Da wird jetzt gesagt, das HTML-Element address zum Beispiel, das soll nicht mehr kursiv sein, das soll jetzt etwas gesperrt sein und so weiter, das können Sie ausprobieren. Probieren Sie auch die anderen hier, nehmen Sie zum Beispiel Midnight oder Ultramarine. Ich gehe mal in den Editor und ändere das und nehme mal hier Midnight, mache das auch auf der Startseite, damit die beiden gleich aussehen. So, und speichern und in den Browser, neu laden. Midnight ist, fast zu erwarten, etwas dunkler. Und Sie sehen auch hier, auf der anderen Seite genau dasselbe. Zum Schluss noch einmal Ultramarine. So, das war die Startseite, jetzt noch die Kontaktseite. Ultramarine. Und rüber in den Browser, neu laden. In blau kommt es hier und auf der Startseite genau dasselbe. Das sind die W3C Core Styles, die eine Idee davon vermitteln, was man mit CSS so alles machen kann. Das ist natürlich nicht maßgeschneidert für unseren Quelltext, sondern das sind ein paar sehr allgemeine Styles, die einfach sagen "Gestalte mal einen Hyperlink, gestalte das Feld address!" und so weiter und so fort. Ein Großteil der Elemente, die wir hier benutzen, die gab es 1997 noch gar nicht. Von daher ist mit CSS natürlich eine Menge mehr möglich bei der Gestaltung als das hier gezeigt wird. Aber trotzdem vermitteln die einen ganz schönen ersten Einblick in das, was mit CSS möglich ist.

Little Boxes – der HTML-Crashkurs

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

3 Std. 5 min (41 Videos)
Ein richtig gutes Training
Sven B.
Großes Lob an Peter Müller. Er erklärt alles so das man es auf anhieb versteht. Ich habe eine Menge gelernt und darauf kann man echt aufbauen.
Ich schau mir jetzt noch die anderen Trainings von ihm an :)
 

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!