Kurzschreibweise

Den Element-Selektor zu verwenden ist zwar die einfachste Methode, allerdings nicht immer sinnvoll. Wo es Sinn macht und an welche Grenzen man stößt, wird Ihnen in dieser Lektion demonstriert ...

... und auch der zweite Teil des Workshops zu dieser Technik bietet umfassende Anwendungsbeispiele, die ganz einfach Lust auf den Einsatz des Element-Selektors machen.

Auch auf mehrere HTML Elemente gleichzeitig kann zugegriffen werden. Eine einfache Trennung mit Beistrichen erzeugt eine Gruppe an Formatierungsvorgaben, die Sie in Folge komfortabel verwenden können.

Der am häufigsten verwendete Selektor ist der Klassen-Selektor. Hier lernen Sie, wie man beliebige HTML Tags mit einem Namen versieht, um diese mittels CSS formatieren zu lassen - und zwar nur diese.

Der ID Selektor unterscheidet sich deutlich vom Klassen Selektor. Ein wichtiger Punkt ist, dass es nur ein ID Attribut innerhalb der HTML Seite geben darf! Wofür das sinnvoll ist, sehen Sie sogleich ...

Der nächste Schritt sind verschachtelte Selektoren. Es ist also möglich zu definieren, dass zum Beispiel nur kursive Texte bei der CSS Formatierung betroffen sind, die sich wiederum in einer Überschrift ersten Grades befinden müssen.

Ähnlich wie bei den kombinierten Selektoren werden diesmal nur Unterelemente formatiert, welche direkt auf ein bestimmtes Eltern-Element folgen. Kaskadierung mal von einer anderen Seite ...

Mit Hilfe des Folge-Element-Selektors lassen sich HTML Elemente formatieren, welche auf ein bestimmtes 'Schwestern-Element' folgen. Lernen Sie also fast die ganze Familie von Selektoren kennen!

In diesem Film lernen Sie die wichtigen Unterschiede zwischen <div> und <span> Tag kennen. Wann welches dieser beiden - zugegeben recht ähnlichen - Tags verwendet werden sollte und wie diese mit CSS behandelt werden wird ebenso ausführlich erläutert.

Hier erfahren Sie, wie Sie per CSS auf beliebige HTML Attribute zugreifen und die Attributswerte verschieden anzeigen lassen können. In diesem Beispiel werden zwei Sprachen in unterschiedlichen Farben dargestellt und später nur eine der beiden Sprachen eingeblendet.

CSS kann auch zusätzlichen Content in die Seite einbinden, indem man entweder vor oder nach einem HTML Tag einen einzufügenden Text angibt. Aber nicht nur Text lässt sich einfügen ...

Wie man aktive, also angeklickte Links gestalten oder Rollover Effekte erstellen kann und ähnliche Pseudo-Elemente verarbeitet, ist Inhalt dieser ausführlichen Lektion.

Im ersten Teil des Workshops geht es um die Formatierung von Überschriften und Absätzen. Ziel ist es, die Seite ansprechender zu gestalten und schließlich ...

... Hyperlinks anders als gewohnt zu formatieren. Selbst Rollovers - also Veränderungen bei Mauszeigerkontakt - sind dabei sogar recht einfach zu verwirklichen ...

... um letztendlich noch mehr aus CSS herauszuholen. Beispielsweise können durch Selektionen mit Bedingungen direkt auf eine Überschrift folgende Absätze angesprochen werden. Viel effizienter als der jeweilige Verweis in der HTML Datei!

Ab durch die Mitte? Eine oft gewünschte Funktion wird in dieser Lektion gründlich erläutert: wie nämlich per CSS der Inhalt der Seite zentriert werden kann.

In diesem Film sehen Sie, wie eine herkömmliche Navigationsleiste per CSS erstellt wird - allerdings entsprechend effizienter und sauberer als natürlich in der 'HTML-only Variante'.

In diesem Beispiel arbeiten wir mit drei Spalten. Je nachdem wie weit man das Browserfenster aufzieht, soll die Breite der mittleren Spalte variieren, damit die äußeren beiden immer gleich breit und hoch sein können.

Die Skalierung des Browserfensters kann den Inhalt anpassen? Ist das möglich? Selbstverständlich! Den Beweis treten wir am Beispiel mit drei Spalten, die per CSS konfiguriert wurden, an.

Einmal mehr bestätigen sich hier die Definitionen aus den ersten Kapiteln dieses Video-Trainings: CSS ersetzt in vielen Bereichen die altbewährten HTML <tags> gemäß der Vorgabe der Trennung zwischen Inhalt und Grafik.

Der Autor verrät Ihnen die Möglichkeiten zur Platzierung von Bildern mittels Anweisungen im CSS - und selbstverständlich auch Ausblicke auf alternative Arten und Möglichkeiten, diese in Webseiten einzubinden.

Bei Hintergrundbildern kann man bekanntlich einstellen, wie sie angeordnet werden sollen. Das ist allerdings noch lange nicht alles. Wie fixierte Hintergründe funktionieren, bringen Sie in diesem Film in Erfahrung.

Grafisch anspruchsvolle Seiten basieren oftmals auf Bildern, die in die Überschrift eingebunden sind - ein nicht unwichtiges Problem für Suchmaschinen. Hier verrät Ihnen Helge Maus den Trick, dennoch sauber aufgelistet zu werden.

Wie Sie beim Erstellen der Formulare zur Positionierung ohne Tabellen auskommen, wird Ihnen hier vermittelt. Lernen Sie im Nu die saubere Art und Weise - eine interessante Alternative!

Hier wird nocheinmal auf das vorangehende Beispiel eingegangen und das Anzeigeergebnis dementsprechend verbessert. Weiters wird das HTML Tag <label> vorgestellt.

Natürlich kann es auch bei Formularfeldern nicht schaden, diese gestalterisch ein wenig zu verändern, um Sie ins Design einer Seite einzupassen. Innerhalb weniger Minuten lernen Sie, wie das funktioniert!