WordPress Blog
Alle Artikel zu
CSS
-
Block-Styles für Gutenberg-Blöcke ergänzen
Gutenberg-Blöcke können mehrere Design-Varianten haben. Beim Button-Block zum Beispiel gibt es zwei Designs zur Auswahl, eine gefüllte Version und eine Kontur-Version. Auch andere Blöcke können zusätzliche Design-Varianten bekommen.
-
Einführung in CSS Grid: minmax, auto-fill und auto-fit
In diesem Artikel gehen wir wieder zurück zum Grid-Container. Im echten Leben reicht ein automatischer Raster, der alles in gleich breite Spalten aufteilt, manchmal nicht aus.
-
Einführung in CSS Grid: Die Elemente im Grid-Container
Im ersten Teil dieser Einführungsserie ging es um den Grid-Container. Das ist der Container, in dem der Grid stattfindet und der die Grid-Elemente umschließt. In diesem Artikel geht es um die Grid-Elemente selbst und wie man sie mit CSS Grid gestalten kann.
-
Einführung in CSS Grid: Der Grid-Container
Ein Raster mit CSS Grid besteht grob gesagt aus einem Container und den darin enthaltenen Grid-Elementen. In diesem Artikel geht es um das CSS für den Container.
-
Im Gutenberg-Editor mit CSS-Klassen arbeiten
Eine relativ einfache Methode, das Aussehen eines Gutenberg-Blocks anzupassen, ist das Arbeiten mit CSS-Klassen. Bei jedem Gutenberg-Block gibt es die Möglichkeit, eine CSS-Klasse einzutragen. Ich arbeite viel mit solchen Helfer-Klassen. Sie lassen sich gut in die CSS-Systematik eines Projekts integrieren.
-
Die Inhalts-Breiten der Gutenberg-Blöcke
Gutenberg-Blöcke und damit Gutenberg-Themes wie Twentytwenty verwenden drei verschiedenen Content-Breiten. Eine eher schmale Standard-Breite, die in der Regel den Fließtext enthält, eine „weite Breite“ und eine „volle Breite“.
-
Pixel, em und rem – was ist der Unterschied?
Im CSS kann man die Schriftgröße (font-size) in unterschiedlichen Einheiten angeben. Die bekannteste Größe sind Pixel. Aber daneben gibt es auch noch die Einheiten em und rem. Was hat es damit auf sich?
-
Eine CSS-Datei ausmisten und überflüssigen Code entfernen
Eine CSS-Datei überarbeiten, die in die Jahre gekommen ist, kann mühsam sein. Der erste Schritt ist, herauszufinden, welche CSS-Angaben überhaupt noch aktuell sind.
-
Pseudo-Klassen a:visited, a:hover, a:focus und a:active
Was a:hover bedeutet, weiss jeder, der mal die Nase an eine CSS-Datei gehalten hat. Die Pseudo-Klassen a:visited, a:focus und a:active sind weit weniger bekannt. Mir war jedenfalls lange nicht klar, was die Angaben genau bewirken.
-
Unterstreichung näher am Text positionieren
Ein guter Tipp von Florian Brinkmann zum Gestalten von Links Florian schreibt: „Wenn ihr einen Link oder anderen Text mit einer Unterstreichung versehen möchtet, dann greift ihr vermutlich auf border-bottom zurück, statt text-decoration (…)
-
Nachfahre, Kind oder Geschwister? CSS-Selektoren kombinieren
CSS-Selektoren lassen sich auf unterschiedliche Arten kombinieren. Die Schreibweisen dafür sind nicht ganz leicht auseinander zu halten.