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: Formulare erstellen

HTML-Formulare existieren seit den frühen 1990er Jahren. Anfangs waren sie schlicht, mit nur Textfeldern, Buttons und Checkboxen. Mit HTML4 kamen neue Input-Typen, die Validierung erleichterten. HTML5 führte spezialisierte Typen (email, date, range) und Elemente wie <datalist> oder <output> ein, um nutzerfreundliche, interaktive Formulare ohne externe Skripte zu ermöglichen. Heute sind Formulare zentral für Web-Interaktionen. HTML-Formulare … Weiterlesen

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

Übersicht: Semantische HTML-Elemente

Im Rahmen von SEO und Barrierefreiheit kamen mit HTML5 neue selbstbeschreibende Tags, die es Maschinen erleichtern Inhalte auf Webseiten einzuordnen. Die neuen Tags ersetzen bisher gebräuchliche allgemeinere Elemente, z.B. <div>, und verbessern dadurch SEO-Ranking, Keyboard-Bedienung und Screenreader-Kompatibilität. Nachfolgend sind diese Tags nach Anwendungsbereichen gegliedert: 1. Layout und DOM-Struktur Tag Beschreibung Beispiel <header> Kopfbereich eines Dokuments … Weiterlesen