Rachel Andrew hat schon 2019 beschrieben, wie man am besten CSS lernen kann:
Sie sehen alle Beiträge zum Thema
CSS
Beiträge zu CSS
- CSS (27)
- HTML (17)
- HTML + CSS (Buch, Videokurs) (22)
- Meine Bücher (29)
- Meine Videokurse (23)
- Social Media (5)
- Sonstiges (11)
- Tools (25)
- WordPress (39)
Tolle Typografie-Website: »Modern Font Stacks«
Wenn Sie die Vorzüge schneller Systemschriften schätzen, aber nicht alles immer mit System UI gestalten möchten, ist ein Besuch auf Modern Font Stacks definitiv eine gute Idee.
Der »CSS Snapshot 2022«
Alle paar Jahre veröffentlicht die für die Entwicklung von CSS verantwortliche CSS Working Group (CSSWG) einen CSS Snapshot, eine Momentaufnahme und Referenz, an der Webentwickler und Browserhersteller sich orientieren können.
Eine sehr kurze Geschichte von CSS
In diesem Beitrag möchte ich Ihnen ganz kurz zeigen, wie die Cascading Style Sheets zu dem wurden, was sie heute sind.
Inhalte am Bildschirm verstecken mit der Klasse »visually-hidden«
Auf Webseiten gibt es manchmal Elemente, die zwar im Quelltext und für Benutzer mit einem Screenreader sinnvoll sind, in einem visuellen Layout aber nicht benötigt werden.
Zu diesem Zweck kann man, wie in diesem Beitrag beschrieben, einen Hilfsklasse erstellen, die man z. B. visually-hidden nennt.
Video: Hexadezimale Farbangaben verstehen
In diesem genialen, 18-minütigen Vortrag erklärt David DeSandro, wie er als farbenblinder Entwickler Hex-Codes liest:
- Vortrag Read color hex codes (mit Video, Slides und Transkript)
Danach sieht man Hex-Codes buchstäblich mit anderen Augen.
Using HSL Colors in CSS
Toller Beitrag zum Thema Using HSL Colors In CSS:
Ahmad Shadeed explains what HSL is, how to use it, and shares some of the useful use-cases and examples that you can use right away in your current projects.
Smashing Magazine (07/2021)
Wenn Sie hsl() interessant finden, ist dieser Artikel eine echte Empfehlung.
Blocksatz im Web
»Warum Blocksatz auf Websites tabu ist« ist ein lesenswerter Beitrag von Martin Sauter:
Blocksatz ist ästhetischer, besser lesbar und professioneller als Flattersatz mit seinem unregelmässigen rechten Rand. Und trotzdem nutzen fast alle Websites dieser Welt Flattersatz.
Warum Blocksatz auf Websites tabu ist
Fazit: Blocksatz ist ohne Silbentrennung nicht sinnvoll, und die wiederum ist im Web gar nicht so einfach. Mit Testseite für Blocksatz und Silbentrennung.
Margin nur in eine Richtung
»Single-direction margin declarations« ist ein Klassiker von Harry Roberts :
The basic premise is that you should try and define all your margins in one direction. This means always use margin-bottom to push items down the page …
CSSWizardry.com
Kuriert Collapsing Margins und ist einfach einfacher. Bootstrap macht das heute noch: Avoid margin-top.
Listen: Das Wichtigste zum Gestalten von Aufzählungszeichen per CSS
In diesem Beitrag zeige ich Ihnen, wie Sie die Aufzählungszeichen von Listen per CSS gestalten können. Dazu lernen Sie zunächst die Voreinstellungen vom Browser-Stylesheet kennen und sehen, wie man diese mit der CSS-Eigenschaft list-style und dem Pseudoelement ::marker gestalten kann.
Responsive Navigation mit Progressive Enhancement
In diesem Beitrag erstellen Sie eine responsive Navigation, die immer funktioniert: Ohne JavaScript sehen die Besucher eine vertikale Navigationsliste, mit JavaScript gibt es einen Menübutton, der die Navigation bei Berührung sanft einblendet. In breiten Viewports bekommen die Besucher eine horizontale Navigation.
Sticky CSS Grid Items
Melanie Richards erklärt, wie man position: sticky innerhalb eines Grid-Layouts einsetzen kann.
CSS-Tricks – A Complete Guide to Grid
Eines der besten Nachschlagewerke zum »CSS Grid Layout« ist der »Complete Guide« von CSS-Tricks.com.
CSS-Tricks – A Complete Guide to Flexbox
Eines der besten Nachschlagewerke zum »Flexible Box Layout« ist der »Complete Guide« von CSS-Tricks.com.
Über Pfadangaben in CSS-Regeln
Beim Einbinden von Hintergrundgrafiken sorgen die Pfadangaben zur Grafikdatei manchmal für Verwirrung. Die Grundregel lautet: »Pfadangaben in CSS-Regeln werden immer aus Sicht des CSS gesehen«.
Beschreibungslisten gestalten per Grid
Beschreibungslisten, die auch unter ihrem alten Namen Definitionslisten bekannt sind, kann man mit ein paar einfachen CSS-Grid-Anweisungen sehr einfach layouten.
Eine kurze Geschichte der »CSS Resets«
Dieser Beitrag stellt die wichtigsten klassischen CSS-Resets vor, die jeder CSS-Autor kennen sollte, und zeigt dann noch ein paar interessante, moderne Resets. Auch wenn man einen CSS-Reset heute nicht mehr unbedingt benötigt, lohnt sich die Beschäftigung damit, denn man lernt dabei eine Menge.
Online-Tool zum Ordnen von Farbnamen
Einfache Farbnamen wie black und white haben für den Einstieg in HTML und CSS den Vorteil, dass man nichts erklären muss, und zumindest die Grundfarben sind auch in English verständlich. Zum spielenden Kennenlernen von Farbnamen gibt es ein pfiffiges Online-Tool.
Spaß mit Spezifität: ».bild.bild.bild figcaption«
Jens Grochtdreis hat einen Blogbeitrag veröffentlicht, in dem er einen kleinen Trick beim Umgang mit der Spezifität beschreibt.
Responsive CSS-Layouts? Ohne float? Echt?
Mehrspaltige Layouts wurden in CSS lange Zeit quasi in Notwehr mit Eigenschaften wie float oder position umgesetzt. Das war zwar besser als die HTML-Tabellen der 90er-Jahren, aber alles andere als einfach. Inzwischen geht das viel einfacher.