Tailwind CSS v4

CSS-Framework, durch das man auf .css-Dateien verzichten kann. Es bietet, ähnlich wie Bootstrap, zahlreiche Klassen, die direkt ins HTML geschrieben werden. Allerdings standardmäßig weniger high-level. Während Bootstrap im Standard auch Optionen bietet um komplett fertige Elemente zu erstellen, z.B. ein Karussell, bietet Tailwind eher die einfachen Klassen um das Design und responsive Verhalten festzulegen, z.B. … Weiterlesen

Übersicht: CSS-Grid

CSS Grid ist ein zweidimensionales Layout-System für das Web — es erlaubt das gleichzeitige Layout in Zeilen und Spalten. Du definierst einen Grid-Container (das Elternelement) und darin werden Grid-Items positioniert. Grid ist ideal für komplexe Seiten- oder Komponentenlayouts und arbeitet gut mit anderen Modulen (z. B. Flexbox). MDN Web Docs 1. Grundprinzip von CSS Grid … Weiterlesen

CSS-Pseudo-Elemente

1. Was sind Pseudo-Elemente? Ein Pseudo-Element ist ein virtuelles Kind eines existierenden Elements, mit dem man bestimmte Teile eines Elements gestalten kann, etwa: Sie werden in CSS mit zwei Doppelpunkten (::) notiert — Single-Colon (:) wird historisch noch unterstützt für einige alte Pseudo-Elemente. MDN Web Docs 2. Wichtige Pseudo-Elemente & ihre Verwendung Pseudo-Element Beschreibung Typische … Weiterlesen

Kategorien CSS Schlagwörter

Die unterschiedlichen Einheiten im CSS

In den letzten Jahrzehnten hat sich das CSS-Einheitensystem stark weiterentwickelt. Anfangs dominierten absolute Einheiten wie px und pt. Mit dem Aufkommen von Responsive Design wurden relative Einheiten wie em, rem, % und Viewport-Einheiten (vw, vh) entscheidend. Neuere Varianten (dvh, vi, vb) ermöglichen heute flexiblere, kontextbewusste Layouts für verschiedene Geräte und Umgebungen. Die folgende Übersicht zu … Weiterlesen

CSS-Reset-Datei

In Jahrzehnten der Webgestaltung haben sich viele Dinge weiterentwickelt, vor allem die Endgeräte auf denen Webseiten aufgerufen werden. Es gib viele unterschiedliche Displaygrössen und andere Anforderungen. Einige CSS-Werte, die zum Beginn der Entwicklung in als Standard gesetzt wurden, z.B. Margins und Paddings, sind heute, vor Allem mit Blick auf responsives Design, eher ungünstig. Dennoch sind … Weiterlesen

Übersicht: CSS-Selektoren

Es gibt unterschiedliche Möglichkeiten HTML-Elemente im CSS zu adressieren. Die Art der Adressierung bestimmt die Gewichtung gegenüber anderen Regeln für das selbe Element. Diese Übersicht in in folgende Gruppen gegliedert: 1. Grundlegende Selektoren Selector (English) Beschreibung (Deutsch) Beispiel * (Universal Selector) Wählt alle Elemente. * { margin: 0; } element (Type Selector) Wählt alle Elemente … Weiterlesen