Warum CSS eine Extrawurst braucht

In CSS-Dateien können wir keine HTML-Entities verwenden, da diese vom Browser nur innerhalb von HTML-Tags interpretiert werden. Wenn du Text über CSS einfügst, nutzt du stattdessen den ISO-Code des Zeichens in einer speziellen Hexadezimal-Schreibweise.

Die Syntax: Der Backslash macht’s

Um einen Umlaut in CSS darzustellen, verwendest du einen Backslash \ gefolgt vom Hex-Code des Zeichens.

Hier sind die häufigsten Umlaute für dein Stylesheet:

Einsatzbeispiel

/* Herkömmlich: Sollte meist funktionieren, aber störanfällig */
.pflichtfeld::before {
content: "Bitte ausfüllen: ";
}

/* Sicher: Mit dem CSS-Escape-Code */
.pflichtfeld::before {
content: "Bitte ausf\00FC llen: ";
}

Pro-Tipp: Wenn nach dem Escape-Code direkt ein Buchstabe folgt, setze ein Leerzeichen nach dem Code (wie im Beispiel oben). CSS erkennt das Leerzeichen als Ende des Codes und zeigt es im Browser nicht an.

Der moderne Weg: @charset

Genau wie in HTML kannst du auch in CSS den Zeichensatz definieren. Denk aber daran, dass die Datei auch entsprechend abgespeichert ist (Die Textdatei mit dem Quelltext als UTF-8 speichern). Dann kannst du Umlauter im Quelltext verwenden, die dann auch richtig angezeigt werden. Füge dazu ganz oben in deine CSS-Datei folgende Zeile ein:

@charset "UTF-8";

Umlaute in HTML vs. CSS

Warum der Unterschied?

CSS-Escapes nutzen die hexadezimale Unicode-Nummer. Das ist nötig, da CSS eine andere Syntax-Logik verfolgt, um Zeichen in Pseudo-Elementen wie ::after darzustellen.

HTML-Entities nutzen Namen oder Dezimalzahlen. Sie sind für den Einsatz direkt im HTML-Markup laut W3C gedacht.

Wenn man erst einmal versteht, dass HTML- & CSS-Code die Brücke zwischen Logik und Ästhetik ist, wird es richtig spannend. Viele denken bei Webtechnologie sofort an staubige Firmen-Homepages oder komplexe Tabellen. Doch weit gefehlt! HTML und CSS sind die unsichtbaren Macher hinter vielen Dingen, die wir im digitalen Alltag feiern.

Besonders als Gamer und Design-Fan sollten dir HTML & CSS nicht gleichgültig sein. Hier sind drei Bereiche, in denen du mit Code zum Creator wirst:

1. Gaming: Dein individuelles Setup (UIs und Overlays)

Wusstest du, dass viele moderne Spiele im Hintergrund auf Web-Engines setzen, um ihre Menüs und Inventar-Ansichten darzustellen? Das nennt man Gaming UI (User Interface).

• Twitch-Overlays: Wer auf Twitch streamt, möchte auffallen. Ob Spenden-Barometer, Alert-Boxen oder Chat-Integrationen – Tools wie Streamlabs basieren fast immer auf HTML und CSS. Wenn du hier selbst Hand anlegen kannst, baust du dir ein Design, das sonst niemand hat.
• In-Game-Interfaces: Sogar Klassiker wie Minecraft erlauben es mit den richtigen Mods, die Optik des Spiels tiefgreifend zu verändern. Wer den Code versteht, gestaltet sein Spiel aktiv mit.

2. Social Media Individualisierung: Discord & Co.

Viele Menschen lieben es, ihre digitale Umgebung zu personalisieren und sich von der Masse abzuheben.

• Discord-Themes: Mit CSS kannst du das Aussehen deines Discord-Clients (z. B. über BetterDiscord) komplett umkrempeln. Von der Schriftart bis hin zu animierten Hintergründen ist alles möglich.
• Profil-Design: Plattformen wie Carrd oder das Retro-Netzwerk SpaceHey boomen, gerade weil sie Nutzern erlauben, ihre Identität durch eigenen Code auszudrücken. Es ist das digitale Äquivalent dazu, sein Zimmer mit Postern zu tapezieren – nur viel flexibler.

3. Digitale Kunst & Creative Coding

CSS ist mittlerweile so mächtig geworden, dass es fast schon eine eigene Kunstform ist. Unter dem Begriff Creative Coding erschaffen Entwickler Erstaunliches:

• Pure CSS Art: Es gibt Künstler, die mit reinem CSS komplette, fotorealistische Gemälde „malen“. Kein Pinsel, nur Code-Zeilen.
• Interaktive Installationen: In Verbindung mit ein wenig JavaScript lassen sich Kunstwerke erschaffen, die auf Mausbewegungen oder Sound reagieren. Für kreative Köpfe ist das oft viel spannender als eine klassische Firmenseite.

Für die Gamer und Kreativen unter euch:

Wusstest du, dass du dein eigenes Twitch-Overlay mit CSS gestalten kannst? Oder dass viele der Menüs in deinen Lieblingsspielen im Grunde wie kleine Webseiten funktionieren? Selbst wenn du kein klassischer Webdesigner werden willst: HTML und CSS sind die Werkzeuge, mit dem du deinem digitalen Setup deinen ganz persönlichen Stempel aufdrückst. Es ist die Kunstform des 21. Jahrhunderts!

So – habe ich dich jetzt überzeugt, dass HTML und CSS absolut spannende THemen sind und einen echten Coolness-Faktor haben?

Du hast dir eine WordPress-Seite erstellt, ein schönes Theme gewählt, aber irgendwie… passt die Farbe der Überschrift nicht zu deinem Logo? Oder der Abstand zwischen den Absätzen ist dir zu groß?

Viele Einsteiger denken, sie müssten jetzt ein Informatikstudium beginnen oder teure Plugins kaufen. Aber die Lösung ist viel einfacher: Custom CSS.

WordPress bietet in fast jedem Theme unter Design -> Customizer -> Zusätzliches CSS ein kleines Fenster an. Hier kannst du mit minimalem Aufwand maximale Wirkung erzielen. Ich zeige dir heute drei „Magic Tricks“, die jeder Anfänger beherrschen kann.

1. Die Farbe deiner Überschriften ändern

Standard-Themes nutzen oft ein langweiliges Schwarz oder Dunkelgrau. Mit diesem Schnipsel gibst du deiner Seite Charakter:

h1, h2, h3 {
color: #4CAF50; /* Ersetze dies durch deinen Hex-Farbcode */
}

Das war schon alles. Genial, oder? Und du wirst sehen, die anderen Schnipsel sind genauso einfach. Kleine Ursache, große Wirkung.

Tipp: Suche bei Google nach „Color Picker“, wähle deine Wunschfarbe und kopiere den Code mit dem #.

2. Bessere Lesbarkeit durch Zeilenabstände

Nichts ist anstrengender als Text, der zu eng gequetscht ist. Gute Lesbarkeit ist das A und O.

p {
line-height: 1.8;
margin-bottom: 20px;
}

Damit verleihst du deinem Text eine luftige, professionelle Optik, wie man sie aus hochwertigen Magazinen kennt.

3. Einen Button hervorheben

Hast du einen Link, der wie ein Button aussehen soll?

.mein-button {
background-color: #ff5722;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
}

Du musst dem Link in WordPress dann nur unter „Erweitert“ die CSS-Klasse mein-button geben. Etwas HTML und CSS Wissen sind jetzt schon notwendig – was kein Problem ist, wenn du die Grundlagen von HTM und CSS kennst. Mein Tipp dazu (du ahnst es bestimmt) eines meiner Bücher, z.B. HTML und CSS für Kids (ist auch eine ganz einfache Einführung für Erwachsene). Achtung, der Link zum Buch leitet dich zu Amazon weiter, wenn du das nicht willst, klick nicht darauf.

So, das wars auch schon für heute mit einem Quick-Tipp. Ich hoffe er hat dir geholfen.

Und noch was zum Schmunzeln:

Der Vollständigkeit halber: Bild ist KI-erzeugt (Kennzeichnungspflicht)

Hand aufs Herz: Ich hätte jetzt stundenlang WordPress-Instanzen aufsetzen, Screenshots zuschneiden und im Grafikprogramm hübsch machen können. Aber ganz ehrlich? Die Zeit verbringe ich lieber mit Schreiben (oder einem Kaffee).

Ich habe stattdessen die KI gefragt, wie sie sich einen Vorher-Nachher-Vergleich vorstellt. Das Ergebnis siehst du oben. Wie man sieht, beherrscht die KI zwar fantastische Welten, aber beim Thema Text im Bild schreibt sie immer noch so, als hätte sie ein paar Gläser Wein zu viel gehabt. Aber hey, die Botschaft kommt an, oder? Struktur und Farbe gewinnen immer gegen die graue Textwüste – und wie genau du das mit den Codeschnipseln von oben machst, hast du ja jetzt auch ohne perfekte Screenshots im Kasten!

HTML und CSS ganz leicht und Schritt für Schritt lernen. Eine Webseite mit allem Drum und Dran erstellen: farbige Texte, übersichtliche Tabellen, schöne Bilder, praktische Formulare, interessante Videos und sogar Musik. Mit viel Hintergrundwissen zur Gestaltung sowie zur Suchmaschinenoptimierung

Es gibt viele Wege, eine eigene Webseite zu erstellen. Aber möchtest du es von Grund auf lernen, solltest du am besten HTML und CSS dazu verwenden. Thomas Kobert weiht dich Schritt für Schritt in die Grundlagen von HTML 5 und CSS 3 ein. Du lernst, mithilfe von HTML und einem Editor deine Webseite mit vielen Elementen zu füllen und zu gestalten: Überschriften, Zeilenumbrüche, Hyperlinks und schöne Textformatierungen gehören ebenso dazu wie das Einbinden von Bildern, Videos und Musik.

Mit CSS verschönerst du dann das Design: Ein toller Hintergrund, Rahmen, Aufzählungen und Tabellen machen aus deinen Webseiten einen Hingucker. Du lernst sogar, wie du Formulare selbst erstellst und erhältst zusätzlich ganz viele Profi-Tipps. Zusätzliches Wissen zu Suchmaschinenoptimierung und Quelltextvereinfachung geben dir das nötige Handwerkszeug für einen tollen eigenen Online-Auftritt.

Viele Fragen und Aufgaben helfen dir, das Gelernte zu festigen und eigenständig weiterzumachen. Am Ende des Buches findest du eine Übersicht über die wichtigsten HTML- und CSS-Befehle zum Nachschlagen.

Aus dem Inhalt:

• Firefox installieren und einen Editor auswählen
• Die erste Webseite erstellen
• Texte mit Stylesheets gestalten
• Fotos und Multimedia einbinden
• Seitendesign mit CSS
• Sich durch Hyperlinks mit anderen Webseiten vernetzen
• Listen, Aufzählungen und Glossare erstellen
• Tabellen mit CSS verschönern
• Individuelle Formulare entwickeln
• Mit einem Dokumentenkopf deine Webseite aufwerten und für Suchmaschinen optimieren
• CSS-Profitipps: schicke Rahmen verwenden, Mauszeiger ändern und Quelltexte optimieren
• Ausführliche CSS-Referenz
• Anhang mit weiterführenden Infos und den wichtigsten HTML-Elementen

Zum Download: Alle Beispiele aus dem Buch, Antworten und Lösungen zu den Fragen, ein Editor sowie ausführlichere Referenzen

Systemvoraussetzungen: Für Windows, Linux und Mac

Ab 11 Jahre, aber auch für Erwachsene, die eine wirklich einfache Einführung suchen

Über den Autor:
Thomas Kobert ist HTML-Experte und hat bereits viele erfolgreiche Bücher zum Thema verfasst.

Pressestimmen:

»Ein leicht verständliches Lehrbuch, für alle Anwender, die eigene Websites erstellen und optimieren möchten.« (Mac Life, 11/2020)

»Nach der Lektüre kann zum Schluss die 1. eigene Webseite vorgewiesen werden. Programmiervorkenntnisse werden nicht vorausgesetzt – mehr als Texteditor und Browser werden nicht benötigt. Der Autor richtet sich an Kinder ab 11 Jahren und vermittelt das Wissen sehr anschaulich und kindgerecht.« (ekz-Bibliotheksservice, 04/2020)