Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Einführung in die Webprogrammierung

CSS lernen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wie bei HTML gibt es auch für CSS viele ausgezeichnete Ressourcen zum Erlernen der Sprache. Wichtig ist bei CSS insbesondere, auf die Browserunterstützung zu achten.

Transkript

Anders als bei HTML geht es bei CSS nicht um die Strukturierung von Inhalt, sondern um das Beschreiben des optischen Erscheinungsbilds. Und das ist natürlich von der Art des Umgangs ganz anders als HTML. Ob es jetzt leichter oder schwerer ist, das liegt im Auge des Betrachters. Sehen wir uns auf jeden Fall man prinzipiell an, womit wir es hier zu tun haben. Das hier ist z.B. die Gestaltung eines Paragraphs, also eines p-Elements. Und die Einzelteile sind gut voneinander zu unterscheiden. P ist der Selektor, d.h. p ist das, was angesprochen wird, das sich in der HTML-Seite wiederfindet, und alle p-Elemente bekommen jetzt ein Erscheiningsbild zugewiesen. Und dieses Erscheinungsbild steht zwischen diesen zwei geschwungenen Klammern, eine öffnende und eine sich schließende geschwungene Klammer. Und alles, was dazwischen steht, wird als Deklaration bezeichnet. Da wird definiert, wie dieses Element oder dieser Selektor eben aussehen soll. Und die Zuweisung der Deklaration erfolgt auch immer in der gleichen Weise. Ich habe eine Eigenschaft, z.B. hier die Schriftfarbe oder eben die Schriftart und die Schriftgröße, und dann, getrennt mit einem Doppelpunkt, habe ich dahinter den zugewiesenen Wert. Und jeder Eintrag innerhalb der Deklaration endet mit einem Strichpunkt, wird also mit einem Strichpunkt vom vorhergehenden Wert getrennt. Worauf sollten Sie achten, wenn Sie CSS lernen? Konzentrieren Sie sich auf die Selektoren. Diese unterschiedlichen Selektoren erlauben es Ihnen, gezielt bestimmte Elemente im HTML anzusprechen. Und sehen Sie sich die Eigenschaften an. Lernen Sie, welche Eigenschaften Sie für bestimmte Elemente einsetzen können und welche Werte diese Eigenschaften akzeptieren. Es gibt Eigenschaften, die sich auf unterschiedliche Strukturelemente beziehen, und zwar nur auf die, und nicht jede Eigenschaft kann jeden Wert annehmen. Das dritte ist implementieren Sie CSS. Erfahren Sie, wo Sie es in Ihr HTML einbauen können und wie Sie Ihr CSS in einem externen Dokument zusammentragen und dann in Ihr HTML einbinden können. Es gibt die unterschiedlichsten Arten, wie ich CSS implementieren kann. Und nachdem das auch Auswirkungen hat, welche CSS-Regel dann gilt, ist es spannend sich genau mit diesem Implementieren auch auseinanderzusetzen. CSS lebt nämlich von drei Grundprinzipien und diese Grundprinzipien sollten Sie wirklich, wirklich verinnerlichen. Es geht um Spezifikationen, es geht um Vererbung und die Kaskade. Diese drei Prinzipien bestimmen, wie Regeln wiedergegeben werden und was passiert, wenn Regeln miteinander in Konflikt geraten. Und die Browser-Unterstützung ist nach wie vor ein nicht ganz zu übersehendes Thema. Sie müssen wissen, welcher Browser was unterstützt und wie Sie einzelne Kleinigkeiten unterschiedlich interpretieren können. Besonders berühmt in dem Zusammenhang ist das sogenannte Boxen-Modell, weil einfach unterschiedliche Browser mit Größenverhältnissen unterschiedlich umgehen. Das waren jetzt so quasi die großen Überschriften. Wenn Sie sich im Detail damit beschäftigen wollen, dann gibt es hierfür einiges an Ressourcen online, an forderster Stelle das Konsortium selbst. Das Konsortium hat auch eine eigene Abteilung für CSS, wobei man sagen muss, dass im Moment im CSS noch ein stärkerer Umbruch ist als in HTML. Weil HTML5 wird zwar schon von den meisten Browsern gleich interpretiert, bei CSS ist es nach wie vor nicht so. Es existiert noch eine Übergangszeit von CSS2 in Richtung CSS3. Und hier beim W3C gibt es eben Empfehlungen, dieses Mal sogar auf Deutsch, was Sie als Anfänger zuerst anschauen sollten. Da gibt es Einstiegsliteratur und Online-Informationen, was Sie in aller Ruhe mal durchschauen können, und es sind sehr, sehr gute Ressourcen dabei. Eine weitere Möglichkeit, wenn Sie eben keine Angst vor der englischen Sprache haben, ist die Webplatform mit der CSS-Abteilung. Die sieht jetzt vom Aufbau her der HTML-Aufteilung sehr ähnlich. Es wurde auch bereits in mehrere Sprachen übersetzt, leider ist Deutsch noch immer nicht dabei. Und Sie haben hier auch unterschiedliche Ressourcen, auf die Sie zurückgreifen können lernenderweise, und, im deutschen Sprachraum nach wie vor ein Klassiker, selfhtml. Auch da gibt es beim Wiki eine eigene Abteilung für CSS, welches Sie in Ruhe durcharbeiten können. Und wenn Sie dann schon soweit sind, dass Sie CSS einsetzen, weil Sie mit den Prinzipien vertraut sind, dann ist diese Seite hier eine der wichtigsten überhaupt. Die Seite heißt "Can I Use" und bei "Can I Use" geht es darum, dass Sie von den einzelnen Features, CSS aber genauso HTML, nachschauen können, wie gut diese schon unterstützt werden. Wenn ich mir Webschriften anschaue, dann bekomme ich hier eine genaue Auflistung, welche der Browser, wie weit unterstützt. Das ist eine unentbehrliche Ressource, gerade im Zusammenhang mit CSS, weil es da eben noch nach wir vor diese feinen, bösartigen Unterschiede gibt, die einen, gerade im Detailbereich, ein bisschen in den Wahnsinn treiben kann. Aber lassen Sie sich nicht abschrecken, auch CSS ist auf dem Weg der Vereinheitlichung. Und ich persönlich habe sehr viel Freude daran, wenn ich sehen kann, dass ein einfach nur strukturierter Text wie mit Zauberhand mit ein paar CSS-Selektoren und ein paar Deklarationen plötzlich zu einer lebendigen Seite wird. Viel Erfolg beim Erlernen von CSS!

Einführung in die Webprogrammierung

Tauchen Sie ein in die vielfältige Welt von Webdesign und -entwicklung und lernen Sie die wichtigsten Technologien, Programmiersprachen und -tools kennen.

2 Std. 46 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

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!