Linktipp: CSS Diner bringt euch CSS-Selektoren mit Praxisbeispielen bei

Avatar von Christoph Langner

1 Min. Lesezeit

0 Aufrufe

Das CSS Diner erklärt CSS-Selektoren spielerisch in 26 Leveln – links der Editor, rechts der HTML-Code.

American diner

Viele Blogger geben sich sehr sehr viel Mühe ihr Blog optisch ansprechend zu gestalten. Ausgehend von einem der unzähligen Templates für WordPress, Drupal und Co. baut man sich „sein“ persönliches Blog zusammen — obwohl man mit ordentlicher Web-Entwicklung gar nichts am Hut hat und man sein Blog per Trial- and Error zusammenschustert.

Hat man den Dreh einmal raus, ist das Umgestalten eines Templates per CSS gar nicht so schwer, die größte Hürde dabei ist in meinen Augen das Referenzieren der entsprechenden Elemente. Muss ich jetzt bsp {…}, .bsp {…}, #bsp {…} oder .bsp p {…} in die style.css schreiben? Was bezieht sich eigentlich auf was?

Wer sich ungern auf selfhtml.org in die Thematik der CSS-Selektoren einliest, der findet im CSS Diner eine praktische CSS-Lernhilfe. In 26 Leveln gilt es den richtigen Selektor zu finden. Links im CSS Editor trägt man seine Lösung ein, rechts in der HTML-Ansicht sieht man den HTML-Code der Dinge, die auf dem Tisch liegen. Das ganze Projekt ist dabei Open-Source, der Code liegt auf einem Github.

Ähnliche Beiträge

2 Kommentare zu „Linktipp: CSS Diner bringt euch CSS-Selektoren mit Praxisbeispielen bei“

  1. Avatar von Luca

    Sehr nice.

    Kann das zwar im Schlaf, aber damit rumspielen ist nett.

    Wo findest du sowas immer? 😉

    1. Avatar von Christoph

      In diesem Fall Hacker News (unten steht das Via). Aber nicht umsonst hab ich ~700 Rss Feeds in meinem Tiny oder folge diversenen Reddit-Subs 🙂 Grüße, Christoph.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Markdown wird unterstützt: **fett**, _kursiv_, [Linktext](URL), `Code`, Zeilen mit - für Listen, 1. für nummerierte Listen, dreifache Backticks für Codeblöcke.

Sicherheitsabfrage: Welches Logo ist das?

Über den Blog

Seit 2006 probiere ich hier aus, was Linux, freie Software und die passende Hardware so hergeben – von Distributions-Tests bis zum Raspberry-Pi-Projekt. Praxisnah statt bloßem Nachrichtenticker.

Zuletzt auf Mastodon

Ich brauche eigentlich keine App für Zeitzonen – aber die GUI von Timezones ist einfach richtig schön gemacht. Eine native GTK4-/Libadwaita-App, die Städte und Zeitzonen übersichtlich auf einer gemeinsamen Zeitachse…

Kategorien

Blog unterstützen

Gefällt dir, was du hier liest? Mit einer kleinen Spende hilfst du, Hosting und neue Testgeräte zu finanzieren – und sorgst nebenbei für den nötigen Kaffee.

Linux und Ich — Linktipp: CSS Diner bringt euch CSS-Selektoren mit Praxisbeispielen bei
https://linuxundich.de/webhosting/linktipp-css-diner-bringt-euch-css-selektoren-mit-praxisbeispielen-bei/ — gedruckt am 30. September 2026